javascript - 从模型中获取属性并在模板中显示它 - Backbone

Question

有人可以检查以下代码并告诉我为什么我不能将模型中的任何属性输出到模板吗？我的 View 和模板正确呈现模型确实获取数据并且这应该工作...

模板:

Name should show here --> {{thisItem}}

我没有收到任何错误并且显示了文本，但没有显示 {{thisItem}}。从阅读 docs这应该有效。

我认为我的模型没有被传递到模板，或者是否需要一个 [点]，即 {{model.name}}？

我的看法:

define([
    'jquery',
    'underscore',
    'backbone',
    'models/myModel',
    'collections/myModelCollection',
    'hbs!templates/testExampleTemplate.html',
], function ($, _, Backbone, myModel, myModelCollection, testExampleTemplate) {
    var thisView = Backbone.Marionette.ItemView.extend({
        initialize: function (options) {
            this.model.fetch();
        },
        model: new myModel(),
        template: testExampleTemplate,
    });
    return thisView;

});

模型的 console.log 显示我确实有数据:

    attributes: Object
          thisItem: "Example Item"

型号:

define([
    'underscore',
    'backbone',
    'jquery'
], function (_, Backbone, jquery) {

    var myModel = Backbone.Model.extend({
        urlRoot: '/myModel'
    });

    return myModel;

});

模板，这是我的作品:

HTML 基础

布局 View 被加载到这里，即

function (Marionette, Handlebars, template, jquery, model) {
    var LayoutView = Backbone.Marionette.Layout.extend({
        template: template,
        regions: {
            holder1: "#holder1"
        }
    });
    return LayoutView;
});

<div id="holder1">I will be replaced</div>

然后有问题的 View 被加载到 holder1 中。

Answer 1

这是一个异步问题。在渲染之前，您需要监听模型的 change 事件。

尝试添加

modelEvents: {
    'change': 'render'
}

到您的 View 。这将确保您的模型在 View 呈现之前加载了它的数据，以便您的数据显示在您的模型中。

顺便说一句，modelEvents 是 Marionette 特有的，而不是 Backbone 原生的。你可以这样做:

var self = this;
this.model.fetch({'success': function() {
    self.render();
});

如果你想单独依赖 Backbone，在你的初始化函数中。

之所以可行，是因为您的模型不会立即从服务器加载数据。这需要一点时间，您的代码会继续执行。所以你在数据加载之前渲染。通过等待它加载，您可以确保模板将与数据一起呈现。您可以从任何地方删除其他渲染调用，因为 View 现在正在渲染自身。旁注，这将允许它在数据自动更改时重新呈现。