如何在使用 Backbone 和 Marionette 的 Handlebars 模板中获取模型后更新数据？答案

【问题标题】：How to update data after model fetch in Handlebars template with Backbone and Marionette?如何在使用 Backbone 和 Marionette 的 Handlebars 模板中获取模型后更新数据？
【发布时间】：2013-12-26 21:56:36
【问题描述】：

在获取分配给 Marionette CompositeView 的模型后，尝试更新 Handlebars 模板中的数据字段，但页面中的 HTML 未更新。

我的代码如下所示：

型号：

B.Page.Model = Backbone.Model.extend({
    url: function () {
        return 'my/resource/';
    },
});

查看：

B.Page.CompositeView = Backbone.Marionette.CompositeView.extend({
    template: Handlebars.compile(templates.find('#my-template').html()),

    initialize: function(options) {
        _.bindAll(this);
        this.model.fetch();
    },
)};

模板：

<script id="my-template" type="text/x-handlebars-template">
    Date: <span id="my-data-field">{{data}}</span>
</script>

我检查了资源，它确实返回了带有 data 字段集的正确 JSON。此外，模型正在传递给视图。

我怀疑这是由于在检索数据后没有调用render 函数；但是，我想获得有关应该如何完成的反馈。

有什么好的方法可以做到这一点？

谢谢！

编辑：这个 CompositeView 确实有一个与之关联的 Collection（当我触发适当的事件时它呈现得很好）。我故意省略了那部分代码以避免混淆问题。

【问题讨论】：

您确定它正在重新渲染吗？您可能需要将更新事件绑定到视图的渲染方法。
完全正确。非常感谢！

标签： backbone.js handlebars.js marionette

【解决方案1】：

所有 Marionette 视图都有一个 modelEvents 对象，该对象绑定到传入的模型。因此，您可以通过以下方式稍微清理已接受的答案：

template: Handlebars.compile(templates.find('#my-template').html()),

modelEvents: {
    'change': 'render'
}

而不是在初始化中手动绑定。

【讨论】：

【解决方案2】：

你是对的，因为 CompositeView 是从 CollectionView 扩展而来的，默认情况下它只会在收集事件上重新渲染。要使其重新渲染模型的更改，您可以在 CompositeView 中执行类似的操作：

initialize: function(){
    this.listenTo(this.model, "change", this.render);
}

【讨论】：

谢谢。我实际使用的语法是this.model.on('change', this.render)，但很明显是同一个概念。
是的，是同一个概念，但有细微的差别：例如见here。