0

我是一个 Backbone.js 新手，我只是在玩弄它。我想知道使用 urlRoot 时模型与视图的关系。我正在使用当地的宁静服务。调用 '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);
4

1 回答 1

0

首先，您要覆盖您的视图，选择不同的名称来存储实例，

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

其次，这fetch是一个异步调用，因此您需要在渲染之前等待它完成，

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

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

于 2013-09-23T15:53:50.910 回答