Javascript-форум (https://javascript.ru/forum/)
-   Backbone.js (https://javascript.ru/forum/backbone/)
-   -   События Backbone дублируются (https://javascript.ru/forum/backbone/45964-sobytiya-backbone-dubliruyutsya.html)

San4ezy 22.03.2014 15:36

События Backbone дублируются
 
Приветствую! Начал изучать Backbone и столкнулся с такой проблемой (код ниже). При переходе на 'tasks_table/:id' вызывается событие 'TasksTable:show'. Это событие обрабатывается вьюхой App.Views.TaskTb. Обработчик вызывает самописную функцию getRequest, отсылающую запрос на сервер и получающую jsonp, и создает новую коллекцию.
Проблема следующая. При переходе на указанный урл (с загрузкой страницы) все работает верно. Но если вызвать событие без перезагрузки страницы, например вызовом navigate или ссылкой на анкор, то событие срабатывает 2 раза. Следующий раз 4 и так далее. Как исправить эту ошибку?
(function(){

    window.App = {
        Models: {},
        Views: {},
        Collections: {},
        Router: {}
    };
    var vent = _.extend({}, Backbone.Events);

    // Router
    App.Router = Backbone.Router.extend({
        routes: {
            '': 'index',
            'tasks_table/': 'tasksTable',
            'tasks_table/:id': 'tasksTable'
        },
        index: function(){
            console.log('index');
        },
        tasksTable: function(id){
            vent.trigger('TasksTable:show', id);
        }
    });

    // View
    App.Views.TaskTb = Backbone.View.extend({
        tagName: 'table',
        initialize: function(){
            vent.on('TasksTable:show', this.show, this);
        },
        show: function(id){
            getRequest('GetTasksTable', 'project_type=' + id, function(data){
                var view = new App.Views.TaskTb({collection: new App.Collections.TaskTb(data['data'])});
                $('#tasks_table').append(view.render().el);
            });
        }
    });
    new App.Views.TaskTb();

    new App.Router();
    Backbone.history.start();
}());

И еще, при этом запросы выполняются значительно медленнее, чем напрямую к серверу. Может я что-то не так делаю?
Заранее всем спасибо!

Hoshinokoe 25.03.2014 01:07

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

В целом логика не верная. Нужно для текущей вьюхи просто устанавливать данные в коллекции.

show: function(id){
    var self = this;
    getRequest('GetTasksTable', 'project_type=' + id, function(data){
        self.collection = new App.Collections.TaskTb(data['data']);

	 _.each(self.collection.models, function (model, index) {
                var view = new App.Views.TaskTableRow({ model: model}); //создаешь отдельную вьюху для каждой строки
                self.el.append(view.render().el); // добавляем в таблицу
            }, self);

   });
}


Часовой пояс GMT +3, время: 18:32.