主干.js应用程序与视图的奇怪行为答案

【问题标题】：backbone.js app odd behavior with views主干.js应用程序与视图的奇怪行为
【发布时间】：2011-10-08 09:03:48
【问题描述】：

试图将我的头包裹在backbone.js 上，到目前为止我喜欢我所看到的。我有一个关于我不太理解的观点的问题。我正在创建一个演示应用程序，它使用表单输入将 LI 附加到 UL。假设它是电影列表。所以我有：

AppView，我的整个应用程序的视图
MovieView，电影 UL 中的单个 LI

当您单击添加电影时，我想创建一个新的 MovieView 并将其附加到我的 AppView 中的 UL。我有一个小提琴：http://jsfiddle.net/nCEz2/

发生的情况是，每次我创建一个新的 MovieView 时，不是将 LI 附加到 UL，而是更新旧的 MovieView。因此，我没有每次都将新的 LI 附加到 UL，而是只添加了第一个，更新为我添加的最新项目。任何想法为什么我只得到一个 MovieView 并且它没有像我认为的那样附加？

【问题讨论】：

标签： backbone.js

【解决方案1】：

您的示例未按您预期的方式运行，因为 MovieView 的 $el 属性已初始化一次，因此它始终表示 MovieView 的所有实例中的相同 DOM 对象。因此，尽管您每次渲染新的 MovieView 时都更改了 li 的文本，但您总是将相同的 li 添加到 ul 并且在第一次添加它之后就没有任何操作了。

获得您期望的行为的一种方法是使用 tagName 属性，以便主干将为每个视图实例自动创建一个新的 li 元素。例如

var MovieView = Backbone.View.extend({
    tagName: 'li',

    initialize: function () {
        _.bindAll(this, 'render');

        return this.render();
    },

    render: function () {
        $(this.el).text(this.model.get('name'));
    }
});

然后在你的 AppView.movieAdded 方法中：

movieAdded: function (newMovie) {
    var movieView = new MovieView({
        model: newMovie
    });

    $('#movieList').append(movieView.el); 
},

【讨论】：

你摇滚史蒂夫。感谢您的输入，我应该发现这一点。我在想，每次我创建一个新的 MovieView 时，它都会创建一个新的 $('li')，但应该更好地知道 js 只会通过引用来完成。不错的收获！