2

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

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

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

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

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

我可以实例化模型并将 a.fetch()放入setInterval. 但其余的暂时逃过我的视线。

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

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

4

2 回答 2

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 ();
于 2013-07-27T16:51:03.293 回答
2

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

这是一个从实例化到显示的示例（此处为 jsFiddle）：

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 );
于 2013-07-27T20:40:31.363 回答