jquery - Backbone.js 视图无法更新

Question

我正在为这里的一个问题提供示例代码，但我偶然发现了这个问题。我明确知道缺少一些简单的东西，但无法推理出什么。渲染一个简单的集合不会显示在 DOM 中，但会在控制台中进行调试。代码有点长（冗长），所以不想在这里复制。有一个jsfiddle请看

提琴手

http://jsfiddle.net/zRSg3/2/

视图如下所示：

/*Provides visual display of category*/
var categoryView = Backbone.View.extend({
    tagName: "div",
    template:_.template($("#categoryView").html()),
    className: "category-view",
    initialize: function() {
    },
    render: function() {
        $(this.el).empty().html(this.template(this.model.toJSON()));
        return this;
    }    
});

/*visual display of how categories looks*/
var categoriesView = Backbone.View.extend({
    el: "#accordian",
    render: function() {    
        this.collection.each(this.renderEach,this);
        return this;
    },
    renderEach: function(mod,index,arr) {
        $(this.el).empty().append(new categoryView({model:mod}).render().el);
    },
    events: {
        "load": "initAccordian"
    },
    initAccordian: function() {

    }
});

他们被渲染成这样：

var userCategoriesView = new categoriesView({collection:userCategories});
userCategoriesView.render();​

Answer 1

您的第一个问题是您不能拼写“手风琴”（但我也不能因此不会感觉太糟糕）：

el: "#accordian",

应该：

el: "#accordion",

您的下一个问题是renderEach通过您的集合清除每一步的所有 HTML，这样您最终将只呈现最后一个元素：

renderEach: function(mod,index,arr) {
    $(this.el).empty().append(new categoryView({model:mod}).render().el);
},

挂断empty()电话：

renderEach: function(mod,index,arr) {
    $(this.el).append(new categoryView({model:mod}).render().el);
},

您将遇到的另一个问题是，load您甚至没有，#accordion所以：

events: {
    "load": "initAccordian"
},

不会做任何事情。你必须给initAccordian自己打电话（你可能也想修正拼写）；如果您需要等到浏览器在initAccordion调用之前再次获得控制权，那么您可以使用setTimeout时间为零的 a：

render: function() {
    var that = this;
    this.collection.each(this.renderEach,this);
    setTimeout(function() { that.initAccordion() }, 0);
    return this;
}

如果您需要浏览器在完成工作之前将所有内容定位和调整大小，这种“零超时”技巧很有用。

此外，较新版本的 Backbone 在您的视图中提供了一个 jQuery 化版本的this.elin this.$el，因此您不需要$(this.el).

这是您的小提琴的清理版本：http: //jsfiddle.net/ambiguous/EMMrD/

Answer 2

您在 HTML 中为元素命名了 id ，但您将视图作为选择器accordion传递。修复了那个微小的变化。#accordian

另外：我是否建议您将用于存储扩展 Backbone 类的变量大写？使用小写字母很容易将它们误认为是实例。

Answer 3

您忘记了传递el给视图的构造函数。

只需将：更改var userCategoriesView = new categoriesView({collection:userCategories});为：

var userCategoriesView = new categoriesView({collection:userCategories, el: $('#accordion')});