Javascript 如何使用主干模型中的下划线模板标记?

Javascript 如何使用主干模型中的下划线模板标记?,javascript,json,backbone.js,underscore.js,marionette,Javascript,Json,Backbone.js,Underscore.js,Marionette,我有一个非常小的简单时间应用程序,使用api中的json 基本上,除了从模型中调用模板内的json值之外,其他一切都可以工作 var Time = new Marionette.Application(); Time.addRegions({ mainRegion: "#main-region" }); TimeModel = Backbone.Model.extend({ defaults: { time: "Now",

我有一个非常小的简单时间应用程序,使用api中的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(apime.attributes.time)
可以正常工作

如果我在控制台内键入此
TodaysTime.attributes.time
但是如果我尝试

我现在会得到默认值

显示模型值的正确方式是什么


Github链接到test

发生这种情况是因为您在从服务器获取数据之前渲染了模型。这就是为什么会看到默认值。您应该在模型、承诺或回调上使用侦听器。下面是如何修复的:

      ...
      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
      });
      ...
评论后编辑: 这要看你的情况了。例如,有些人在路由中移动这种逻辑。您只需向ItemView添加initialize函数(但首先从onRender中删除fetch)。比如:

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

现在我知道为什么了!有没有更好的办法。我不应该从ItemView中获取吗?这太好了,谢谢!它似乎更有条理!