Question

有人可以查看以下代码并告诉我为什么我无法将模型中的任何属性输出到模板中？我的视图和模板正确呈现模型确实获取数据，这应该有用......

模板：

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

我没有收到错误和文字显示，但没有{{thisItem}}。从阅读docs这应该有效。

我认为我的模型没有传递给模板，或者是否需要[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 Base

布局视图被加载到这个中。

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，请在初始化函数中使用。

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

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

1 个答案: