从模型中获取属性并将其显示在模板中 - 骨干

Getting attributes from models and displaying it within templates - Backbone

本文关键字：骨干 显示 获取 模型 属性      更新时间：2023-09-26

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

模板： 

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

我没有收到错误，文本显示但没有{{thisItem}}。通过阅读文档，这应该有效。

我不认为我的模型被传递给模板，或者是否需要一个 [点]，即 {{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;
});

控制台.log显示我确实有数据的模型：

    attributes: Object
          thisItem: "Example Item"

型：

define([
    'underscore',
    'backbone',
    'jquery'
], function (_, Backbone, jquery) {
    var myModel = Backbone.Model.extend({
        urlRoot: '/myModel'
    });
    return myModel;
});

模板，这就是我的工作方式：

网页库

布局视图加载到其中，即

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 中。

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

尝试添加 

modelEvents: {
    'change': 'render'
}

到你的观点。 这将确保您的模型在视图渲染之前已加载其数据，以便您的数据显示在模型中。

顺便说一句，modelEvents特定于木偶，而不是 Backbone 的原生。 您可以这样做：

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

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

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

相关文章：