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

Question

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

模板:

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

我没有错误和文字显示但没有{{thisItem}}.从阅读文档,这应该工作.

我不认为我的模型被传递给模板或者是否需要[dot] {{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基础

布局视图被加载到这个ie

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>

然后,有问题的视图被加载到holder1中.

Answer 1

这是一个异步问题.change在渲染之前,您需要先听模型的事件.

尝试添加

modelEvents: {
    'change': 'render'
}

到您的视图.这将确保您的模型在视图呈现之前已加载其数据,以便您的数据显示在模型中.

顺便说一下,modelEvents特定于Marionette而不是Backbone原生.你可以这样做:

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

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

这是有效的,因为您的模型不会立即从服务器加载其数据.这需要一点时间,您的代码将继续执行.所以你在数据加载之前进行渲染.等到它加载后,您将确保模板将使用数据进行渲染.您可以从任何地方删除其他渲染调用,因为视图现在正在渲染自身.注意,这将允许它在数据自动更改时重新呈现.