Backbonejs - Как слушать изменения в коллекции, которая является частью коллекции

Question

Мое приложение состоит из следующих:

Коллекции:

• Разделы
• мест

Модели:

• Мест
• рассадки
• Раздел

SeatingChart имеет Sections как атрибут

Sections представляет собой набор Section

Section имеет Seats как атрибут

A Seats - это коллекция из Seat

Есть ли способ, внутри SeatingChart слушать, когда Seat добавляется к одному из Section с в SeatingChart «s Sections?

Answer 1

Я уверен, что вы знаете, что базовая система действительно предоставляет эту функциональность из коробки. Поэтому я собираюсь предположить, что вы хотели бы предложить, как это сделать. Следующее решение будет иметь особое значение для вашего дизайна. Для обобщения я предлагаю вам взглянуть на Backbone Relational

Вы уже положили первый компонент решения, который должен содержать ссылку на отслеживаемую коллекцию. Это пригодится, когда мы будем развивать отношения.

Но давайте начнем снизу. Вопросы задают вопрос о том, как определить, когда будет добавлено место. Итак, давайте определим Seats коллекцию:

var Seats = Backbone.Collection.extend({ 
    initialize: function() { 
    this.setupListeners(); 
    }, 

    setupListeners: function() { 
    this.on('add', _.partial(this.bubbleAction, 'add')); 
    this.on('remove', _.partial(this.bubbleAction, 'remove')); 
    }, 

    bubbleAction: function (action, model) { 
    this.trigger('seats-action' action, model); 
    } 
}) 

Sections Теперь бы пикап Seats действия и пузырек его.

var Sections = Backbone.Collection.extend({ 
    initialize: function() { 
    this.setupListeners(); 
    }, 

    setupListeners: function() { 
    this.listenTo(this.seats, 'seats-action', this.bubbleSeatsAction); 
    }, 

    bubbleSeatsAction: function (action, model) { 
    this.trigger('section:seats-action', this.sectionClass, action, model); 
    } 
}) 

И, наконец, в вашем SeatingChart коллекции:

var SeatingChart = Backbone.Collection.extend({ 
    initialize: function() { 
    this.setupListeners(); 
    }, 

    setupListeners: function() { 
    this.listenTo(this.sections, 'section:seats-action', this.handleSeatAction); 
    }, 

    handleSeatAction: function (section, action, model) { 
    ///Logic goes here to handle a seat action/// 
})