Извлеките модель магистрали из выбранного подпредставления и создайте с ее помощью новое представление

Скажем, я создал MainView (список), в котором коллекция заполнена четырьмя моделями Backbone. Затем для каждой модели в коллекции я отображаю SubView (элемент списка) на основе данных в каждой модели. Игнорируя, является ли эта вложенная структура представления оптимальной, как мне создать событие щелчка для каждого подпредставления (элемента списка), которое запускает новое представление, ссылающееся на модель, которая использовалась для его создания?

Я описал то, что я пытаюсь сделать (до некоторой степени) в следующем коде:

var MainView = Backbone.View.extend({

initialize: function(){
            this.render();
    //fetch data into a collection
    this.collection.fetch().then(function(){
                this.subRender();
            });
    //view now has a list with four list items based on four models
},

events: {
    "click li": 'newView'
},

newView: function(){
    //retrieve the model from the clicked li
            //close the current view, then
    var newView = new NewView({model});
}

render: function(){
    //create an unordered list element
    this.$el.html('<ul id="list"></ul>');
},

subRender: function(){
    //for each model in the collection create a new subview
    var subView = new SubView({model: model}); // x 4 times

}

});

var SubView = Backbone.View.extend({

el: '#list',

render: function(){
    //create an <li> with the passed-in model
    //append it to the list
},
});

РЕДАКТИРОВАТЬ: есть сообщение в LosTechies, которое имеет дело с этим, я наконец нашел...

1 ответ

Я думаю, что вы можете просто иметь событие click, но используйте stopImmediatePropagation();

var SubView = Backbone.View.extend({
    el: '#list',
    events: {
        "click": 'doHandler'
    },
    doHandler: function(event) {
        event.stopImmediatePropagation(); // need this to stop other click handlers and the event bubbling up to ancestor elements
        // do stuff 
    },
    render: function(){
        //create an <li> with the passed-in model
        //append it to the list
    },
});
Другие вопросы по тегам