0

我正在尝试跟随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');

有趣的事情发生在渲染函数中。我可以看到控制台记录了“render”，并且“bar”文本被附加到节点，但不是“foo”文本。我认为 this.$el 和 $('ol#recent-station') 是一回事，但显然不是。我错过了什么？

4

1 回答 1

1

如果您不使用el属性指定 dom 元素，则会使用tagName、id、className和attributes从视图中创建一个元素。

在您的情况下，您没有el在视图中指定属性，因此您创建了一个如下所示的元素：

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

然后你追加<li>foo</li>到它，但你的视图元素仍然不在DOM.

$('ol#recent-station')返回包含在您html中的 dom 元素，它与您的视图元素不同，但具有相同的属性。

因此，在您的示例中，您需要通过提供el属性来指定现有元素。

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

   /* rest of your code below */

修改这些改动，http://jsfiddle.net/DsRJH/。

于 2013-09-07T21:23:42.050 回答