javascript - 如何根据 Backbone 模型的响应创建/更新 Backbone View ？

Question

我发现了大量处理项目列表的 Backbone 示例。我正在尝试找到一种方法来完成以下任务:

1. 更新商品的最新价格(从服务器调用中提取)以及有关该商品的其他信息(也来自服务器......相同的 API 调用)
2. 如果价格发生变化，调用其他函数

看起来很简单，我知道。我可以处理服务器 API，但我对 Backbone 方面有点迷茫。我是 Backbone 的新手，所以请多多包涵。

我发现我的模型应该是这样的:

  var Item_m = Backbone.Model.extend({
    urlRoot: '/welcome/item'
  });

我可以实例化模型并将 .fetch() 放入 setInterval 中。但其余的我现在暂时忘记了。

我的 /welcome/item/1 返回:{"id":1,"price":121} 顺便说一句。

我可以成功获取数据，我只是不知道如何将它与主干中的 View 联系起来。

Answer 1

Backbone 是一个事件驱动的框架，它定义的每个对象都可以listenTo 或trigger 事件。这就是组件在 Backbone 应用程序中的通信方式 ( Built-in events )。考虑到这一点，每当 Backbone.Model 的属性发生变化时，它都会触发一个 change:[attribute-name] 事件。您可以将任意数量的函数绑定(bind)到此事件。

这是一个从实例化到展示的例子(jsFiddle here):

var Item = Backbone.Model.extend({ urlRoot: '/welcome/item' });

var ItemView = Backbone.View.extend({

  // Very minimal example template for an item
  template: _.template('<a href="#/item/<%= id %>"> <%= price %> </a>'),

  initialize: function() {
    // Calls the views render on model change
    this.listenTo( this.model, 'change', this.render );

    // Calls special function for price change
    this.listenTo( this.model, 'change:price', this.onPriceChange );

    return this.render();
  },

  render: function() {
    // Populate the view's DOM element with the compiled template reflecting the model
    this.$el.html( this.template(this.model.attributes) );
    return this;
  },

  onPriceChange: function() {
    // Do something special for price change, maybe trigger a global event?
    Backbone.trigger('item:price:change', this.model );
  }
});

var item = new Item({ id : 1 });
item.fetch();
var itemView = new ItemView({ model : item });

// Insert the view's element inside the DOM
$('#item-placeholder').append( itemView.el );