如何根据来自主干模型的响应创建/更新主干视图？答案

【问题标题】：How to create / update a Backbone View based on a response from a Backbone Model?如何根据来自主干模型的响应创建/更新主干视图？
【发布时间】：2013-07-27 13:38:29
【问题描述】：

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

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

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

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

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

我可以实例化模型并将.fetch() 放入setInterval。但其余的暂时不让我知道。

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

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

【问题讨论】：

您是否尝试过从模型中侦听"change" 事件？
不确定你的意思...我可以监听change 事件并触发一个事件，但我如何将它与View 联系起来？

标签： javascript model-view-controller backbone.js backbone-views backbone-events

【解决方案1】：

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

这是一个从实例化到显示的示例（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 );

【讨论】：

【解决方案2】：

您可以按以下方式构造视图和模型：

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

var ItemView = Backbone.View.extend({
    initialize: function() {
         this.model = new Item_m ();
         this.listenTo(this.model, "change", this.render);   
         /*Can setup the periodic pull using Backbone.poller.*/
         //https://github.com/uzikilon/backbone-poller

    },

    render: function() {
         //Do UI rendering stuffs   
    }
}); 


var itemVieww = new ItemView ();

【讨论】：