Backbone.js 为什么'；这是不是$el.append（）工作？_Backbone.js

Backbone.js 为什么'；这是不是$el.append（）工作？

backbone.js

Backbone.js 为什么'；这是不是$el.append（）工作？,backbone.js,Backbone.js,我正努力跟上。我不明白$el在视图中应该如何工作这是我的HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dashboard</title> </head> <body> <h1>Dashboard</h1> <ol class="foo

我正努力跟上。我不明白$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');

var-RecentStation=Backbone.Model.extend（{
默认值：{
电台：“，
},
初始化：函数（）{
log（'initialized:'+JSON.stringify（this））；
this.on（'change'，function（）{
log（'changed:'+JSON.stringify（this））；
})
}
});
var RecentStationView=Backbone.View.extend（{
标记名：“ol”，
id:'最近的电台'，
初始化：函数（）{
this.model.bind（'change'，u.bind（this.render，this））；
},
render:function（）{
console.log（'render'）；
这.$el.append（“foo”）；
$（'ol#recent station'）。追加（'li>栏'）；
归还这个；
},
});
var recent=新的RecentStation（）；
var recentView=new-RecentStationView（{model:recent}）；
最近设置（'station'、'My station'）；

有趣的事情发生在渲染函数中。我可以看到控制台上记录了“render”，节点上附加了“bar”文本，但没有“foo”文本。我认为，$el和$（'ol#recent station'）是一回事，但显然不是。我缺少什么？

如果不使用

el

属性指定dom元素，将使用视图中的

标记名

、

id

、

类名

和

属性

创建一个dom元素

在本例中，您没有在视图中指定

el

属性，因此创建的元素如下所示：

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

摆弄一下这些变化，啊，是有道理的。谢谢

 var RecentStationView = Backbone.View.extend( {
   // remove tagName and id
   el:'#recent-station',

   /* rest of your code below */