왜이. $ el.append()가 작동하지 않습니까?

나는 http://addyosmani.github.io/backbone-fundamentals을 따라 가려고합니다. 나는 엘 엘 (el)이 어떤 관점에서 일하기로되어있는 지 알지 못한다.

가 여기 내 HTML입니다 :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Dashboard</title> 
    </head> 

    <body> 
    <h1>Dashboard</h1> 

    <ol class="foo" id="recent-station"> 
    </ol> 

    <!-- Templates --> 
    <script type="text/template" id="station-template"> 
     <li><%= station %></li> 
    </script> 

    <!-- Javascript --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> 

    <script src="static/js/script.js"></script> 
    </body> 
</html>

그리고 script.js은 다음과 같습니다

var RecentStation = Backbone.Model.extend({ 
    defaults: { 
     station: "", 
    }, 

    initialize: function() { 
     console.log('initialized: ' + JSON.stringify(this)); 

     this.on('change', function() { 
      console.log('changed: ' + JSON.stringify(this)); 
     }) 
    } 
}); 

var RecentStationView = Backbone.View.extend({ 
    tagName: 'ol', 
    id: 'recent-station', 

    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
    }, 

    render: function() { 
     console.log('render'); 
     this.$el.append('<li>foo</li>'); 
     $('ol#recent-station').append('<li>bar</li>'); 
     return this; 
    }, 
}); 

var recent = new RecentStation(); 
var recentView = new RecentStationView({model: recent}); 
recent.set('station', 'My Station');

흥미로운 물건 렌더링 기능에 일어나고있다. "렌더링"이 콘솔에 기록 된 것을 볼 수 있으며 "바"텍스트는 노드에 추가되지만 "foo"텍스트에는 추가되지 않습니다. 나는 이것을 $ el과 $ ('ol # recent-station') 같은 것이지만, 분명히 그렇지 않다고 생각했다. 내가 뭘 놓치고 있니?

출처

2013-09-07 Roy Smith

당신이 el 속성을 사용하여 DOM 요소를 지정하지 않은 경우, 하나 tagName, id, className하고 뷰에서 attributes 사용하여 생성됩니다. 당신처럼 보이는 요소를 만들 수 있도록

귀하의 경우

당신은 당신의보기에서 el 속성을 지정하지 않은 : 당신은 다음에 <li>foo</li>를 추가

<ol id='recent-station'></ol>

,하지만보기 요소는 아직 없습니다 DOM.

$('ol#recent-station')은 뷰 요소와 다른에 포함 된 dom 요소를 반환하지만 속성은 동일합니다.

따라서 예제에서 el 특성을 제공하여 기존 요소를 지정해야합니다.

변경 사항이있는 파일, http://jsfiddle.net/DsRJH/.

출처

2013-09-07 21:23:42 fbynite

아, 맞아. 감사. –

왜이. $ el.append()가 작동하지 않습니까?

답변

관련 문제