如何使用骨干模型中的下划线模板标签？

Question

我有一个非常小的简单时间应用程序，它使用来自 api http://date.jsontest.com/ 的 json

除了从模型中调用模板内的 json 值外，基本上一切正常

   var Time = new Marionette.Application();

  Time.addRegions({
      mainRegion: "#main-region"
  });

  TimeModel = Backbone.Model.extend({
      defaults: {
          time: "Now",
          milliseconds_since_epoch: 1234,
          date: "Today"
      },
      urlRoot: 'http://date.jsontest.com/'

  });
  var TodaysTime = new TimeModel();

  TimeView = Marionette.ItemView.extend({
      template: "#template",
      model: TodaysTime,

      onRender: function () {
             TodaysTime.fetch({
                 success: function (apiTime) {
                  console.log(apiTime.attributes.time);
                  TodaysTime = apiTime;
              }
          });
      }

  });

  var timeView = new TimeView();
  Time.mainRegion.show(timeView);
  Time.start();

然后在我的模板中我有这个

<p><%- time %> <%- milliseconds_since_epoch %></p>

我没有收到任何错误，也没有显示任何内容，但函数内部的 console.log(apiTime.attributes.time) 工作正常

如果我在控制台中输入 TodaysTime.attributes.time 它也可以 但是如果我尝试<p><%- TodaysTime.attributes.time %> </p> 我会得到默认值Now

显示模型价值的正确方法是什么？

Github 链接测试https://github.com/nolawi/time-machine-test

Answer 1

这是因为您在从服务器获取数据之前渲染了模型。这就是您看到默认值的原因。您应该在模型、承诺或回调上使用侦听器。解决方法如下：

      ...
      var TodaysTime = new TimeModel();
      TodaysTime.fetch().done(function(){Time.mainRegion.show(timeView);});

      TimeView = Marionette.ItemView.extend({
          template: "#template",
          onRender: function() {
              console.log('rendered');
              TodaysTime.fetch({
                  success: function(apiTime) {
                      console.log(apiTime.attributes.time);
                  }

              });
          }

      });

      var timeView = new TimeView({
        model: TodaysTime
      });
      ...

评论后编辑： 嗯，这真的取决于你的情况。例如，有些人在路线中移动了这种逻辑。您可以添加 initialize 函数（但首先从 onRender 中删除 fetch）给您 ItemView。类似的东西：

initialize: function () {
                this.model.on('sync', this.render, this);
                this.model.fetch({ reset: true, change: true });
                return this;
              }