Как создать/обновить представление магистрали на основе ответа модели магистрали?

Я нашел множество примеров 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 в магистрали.


javascript model-view-controller backbone.js backbone-events backbone-views
person Shamoon    schedule 27.07.2013    source источник
comment
Пробовали ли вы прослушивать события "change" из модели?   -  person mu is too short    schedule 27.07.2013
comment
Не уверен, что вы имеете в виду... Я могу прослушивать событие change и запускать событие, но как мне связать это с View?   -  person Shamoon    schedule 27.07.2013

Ответы (2)


arrow_upward
2
arrow_downward

Backbone — это управляемая событиями структура, каждый определяемый ею объект может listenTo или trigger событий. Вот как компоненты обмениваются данными в приложении Backbone (Встроенные события) . Имея это в виду, каждый раз, когда атрибут Backbone.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 );
person mor    schedule 27.07.2013

arrow_upward
2
arrow_downward

Вы можете структурировать вид и модель следующим образом:

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 ();
person Ming Chan    schedule 27.07.2013