Магистральный маршрутизатор создает несколько представлений, что приводит к привязке нескольких событий к одному представлению. - PullRequest
Новая
       2

Магистральный маршрутизатор создает несколько представлений, что приводит к привязке нескольких событий к одному представлению.

1 голос
/ 21 февраля 2012

Я новичок в backbone.js и пытаюсь понять, как работают маршруты, представления и т. Д., И теперь у меня возникла проблема с созданием событий для одного и того же представления.вот клип, который покажет вам именно то, что я имею в виду.http://screencast.com/t/QIGNpeT2OUWu

Вот так выглядит мой магистральный маршрутизатор 

var Router = Backbone.Router.extend({

    routes: {
        "pages": "pages",
    }
    pages: function () {
        var page_view = new PageView();
    }
});

Поэтому, когда я нажимаю ссылку Страницы, я создаю новый PageView, и это код, который я использую 

PageView = Backbone.View.extend({
    el: $("#content"),
    initialize: function () {
        $.ajax({
            url: '/pages',
            success: function (data) {
                $("#content").html(data);
            }
        });
    },
    events: {
        "click td input[type=checkbox]": "updatePublishedStatus"
    },
    updatePublishedStatus: function (event) {
        console.log('update publish status');
    }
});

довольно простой, я думаю, но, как вы можете видеть в клипе, каждый раз, когда я перехожу к / страницам, я отмечаю другое событие, зарегистрированное в флажке.

Ответы [ 2 ]

2 голосов
/ 21 февраля 2012

Есть несколько вещей, которые идут не так, немного обнажились со мной;)

  1. Ваше видео показывает, что страницы являются коллекцией, Pages.Pages - это Backbone.Model с такими атрибутами, как имя страницы, слаг, опубликованный и т. Д ... У вас этого нет, и это будет больно.Вы не должны просто загружать некоторые html-файлы и отправлять их в DOM, это в первую очередь противоречит цели использования Backbone.
  2. Если вы создадите модель для страницы, она будет иметь представление.Тогда ваш маршрут / pages покажет вид страниц коллекции и т. Д.
  3. Вы получите свои данные не во время инициализации представления, а, выполнив pages.fetch();, где pages является экземпляром коллекции Pages.Это может произойти еще до того, как вы инициализируете свой маршрутизатор.
  4. При изменении атрибутов в вашем представлении будут обновляться отдельные модели.

В качестве побочного эффекта: выборка данных при инициализации невелика,Вы можете вызвать render () до того, как получите данные, и это неинтересно.Также вместо $('#content') вы можете использовать $ el представления.Как в this.$el.html(...);

1 голос
/ 21 февраля 2012

Переместите var page_view = new PageView(), чтобы выйти за пределы Router.pages().

Успешный обратный вызов PageView.initialize() сохраняет data в переменной. Либо в PageView, либо в модели.

Добавить render функцию к PageView, которая устанавливает $("#content").html(data);.

Звоните page_view.render() в пределах Router.pages().

...