Question

我是Backbone.js的新手，我只是在玩它。我想知道在使用urlRoot时模型与View的关系。我正在使用当地的宁静服务。当调用'api / feed / 57'时，我得到以下JSON结果：

{"id":"57","name":"Speakers","name_desc":null,"url":"http:\/\/speakers.com\/feed\/","category":"1","favicon":"http:\/\/g.etfv.co\/http%3A%2F%2Fspeakers.com%2F","last_update":"2013-09-20 12:57:25","insert_date":"0000-00-00 00:00:00"}

我想要达到的目的是让视图显示检索到的值。尝试这样时，将显示默认值，而不是从urlRoot检索的值。我使用console.log（name）来验证json服务是否正常工作。看起来是这样，因为“扬声器”显示在调试中。知道我做错了什么吗？使用以下代码：

var Feed = Backbone.Model.extend({
    urlRoot: 'api/feed',
    defaults: {
        name: 'Test',
        name_desc: 'Test',
        url: ''
        }
});

var feedItem = new Feed({id: 57});

feedItem.fetch({
    success: function (feedItem) {
        var name = feedItem.get('name');
        console.log(name);
    }
})

var FeedView = Backbone.View.extend({
   tagName: 'li',

   initialize: function(){
     this.render();
   },

   render: function(){
     this.$el.html( this.model.get('name') );
  }
});

var FeedView = new FeedView({ model: feedItem });
FeedView.el;
$(document.body).html(FeedView.el);

Answer 1

首先，您要覆盖视图，选择其他名称来存储实例，

var feedView = new FeedView({ model: feedItem });
feedView.render();
$(document.body).html(feedView.el);

其次，fetch是一个异步调用，所以你需要在渲染之前等待它完成，

 initialize: function(){
    this.listenTo(this.model, 'change', this.render);
 },

现在，当模型更改时，将调用渲染函数并使用正确的值更新视图。

Backbone.js，在视图中使用urlRoot结果

1 个答案: