Question

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

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

我知道，似乎很简单。我可以处理服务器API，但我对Backbone方面有点失落。我是Backbone的新手，所以请耐心等待。

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

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

我可以实例化模型并将.fetch()放在setInterval中。但是剩下的就是我现在逃避的。

我的/welcome/item/1顺便回复：{"id":1,"price":121}。

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

Answer 1

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

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 ();

Answer 2

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 );

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

2 个答案: