Question

我在这里提出了一个问题的示例代码，我偶然发现了这个问题。我明确地知道一些简单的东西丢失但却无法推断出什么。渲染一个简单的集合不会在DOM中显示，但在调试控制台期间会显示。编码有点长（详细）所以不想在这里复制。请看一下jsfiddle

的jsfiddle

观点如下：

/*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：

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

如果您需要浏览器在完成工作之前确定所有位置和大小，那么这种“零超时”黑客很有用。

此外，较新版本的Backbone在您的视图中的this.$el中提供了this.el的jQuery-ified版本，因此您无需$(this.el)。

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

Answer 2

您命名为HTML中的元素accordion，但您将视图#accordian作为选择器传递。 Fixed fiddle这个微小的变化。

除此之外：我可以建议您将用于存储扩展Backbone类的变量大写吗？使用小写可以很容易地将它们误认为实例。

Answer 3

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

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

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

Backbone.js视图无法更新

的jsfiddle

3 个答案: