将项目添加到集合后主干和车把呈现问题

Posted 2023-02-22

【中文标题】将项目添加到集合后主干和车把呈现问题

【英文标题】：Backbone and Handlebars Render Issue after adding item to collection

【发布时间】：2012-11-04 13:27:30

【问题描述】：

我是新来的主干和handlebars.js。我正在尝试以编程方式将新项目添加到集合中，并且我希望主干使用 Render 来呈现集合。

我做错了什么？

var Item = Backbone.Model.extend(
    defaults: 
    
);

var List = Backbone.Collection.extend(
    model: Item
);

var ListView = Backbone.View.extend(
    el: $('BODY'), // el attaches to existing element
    initialize: function () 
        _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here

        this.collection = new List();
        this.render();
    ,
    render: function () 
        var template = Handlebars.compile($('#screenshot_template').html());
        $(this.el).html(template(
            row: this.collection
        ));
        return this;
    

);

var listView = new ListView();
window.screenshots = listView;
window.screenshots.collection.add(
    myurl: 'http://placehold.it/350x150'
);

我的车把模板如下所示：

<script id="screenshot_template" type="text/x-handlebars-template">
    #each row
    <div><img src="this.myurl"></div>
    /each 
</script>

【问题讨论】：

你可能想说row: this.collection.toJSON()，试图#each 对一个集合对象不会让你很高兴。

@muistooshort 谢谢。还有3个小时我不会回来了。

但是您不必再花费三个小时，因此可以平衡:)

<img src='this.attributes.myurl</div>' 也可以使用

【参考方案1】：

为您的视图添加一个侦听器，以便它知道集合何时触发添加事件 - 通常在您的视图的初始化函数中完成：

this.collection.on('add', this.render);

显然，您需要在实例化集合后添加它。

【讨论】：

谢谢，这解决了这个问题。我想我可以避免使用把手集合语法，然后像你说的那样使用每个模型的视图。

您仍然可以使用把手来渲染各个模型视图——我就是这样使用它的。