Как маршрутизатор может говорить с видом, кроме использования глобальной переменной?

Question

я не могу понять, почему в моем Backbone приложение (Todo приложение) после того, как я перезагрузить страницу (CTRL + F5) метод filterTodos не дозвонились. Когда я просто нажимаю ссылки для фильтрации Todos («Active», «Completed»), он вызывает вызов.

Вы можете увидеть эту функцию в ссылках ниже. Независимо от того, сколько раз вы нажмите кнопку Обновить в браузере - не отображаются правильные отфильтрованные результаты:

http://todomvc.com/architecture-examples/backbone/#/completed

http://todomvc.com/architecture-examples/backbone/#/active

У меня есть теория, что это потому, что я запуская filter событие из Router слишком рано - это TodosView еще не инициализирован, и поэтому он не listenTofilter события еще.

Но как Router может сообщить View для повторной обработки (на основе фильтра), если этот View еще не существует? Не может ли это быть достигнуто путем запуска какого-либо события в Router, как и я? Один из возможных вариантов - иметь глобальную переменную app.FilterState.

Есть ли другие способы связи между маршрутизатором и не возведенных еще View?

Для app.FilterState обращу свое состояние в Router, а затем проверить его в View и вызовите функцию filterTodos вручную, как так и он будет работать:

просмотров/todos.js

render: function() { 
    app.Todos.each(function(todo) { 
     this.renderTodo(todo); 
    }, this); 
    if (app.FilterState !== 'all') { // <--- ADDED CODE 
     this.filterTodos(app.FilterState); 
    } 
    return this; 
    } 

Существующий исходный код:

маршрутизаторы/router.js

var app = app || {}; 

var Router = Backbone.Router.extend({ 
    routes: { 
    'all': 'all', 
    'active': 'active', 
    'completed': 'completed' 
    }, 
    all: function() { 
    console.log('all'); 
    app.Todos.trigger('filter', 'all'); 
    }, 
    active: function() { 
    console.log('active'); 
    app.Todos.trigger('filter', 'active'); 
    }, 
    completed: function() { 
    console.log('completed'); 
    app.Todos.trigger('filter', 'completed'); 
    } 
}); 

app.Router = new Router(); 
Backbone.history.start(); 

просмотров/todos.js

var app = app || {}; 

app.TodosView = Backbone.View.extend({ 
    el: '#todo-list', 

    initialize: function(todos) { 
    console.log('initialize begin'); 
    app.Todos.reset(todos); 
    this.listenTo(app.Todos, 'add', this.addOneTodo); 
    this.listenTo(app.Todos, 'filter', this.filterTodos); 
    this.render(); 
    console.log('initialize end'); 
    }, 
    render: function() { 
    app.Todos.each(function(todo) { 
     this.renderTodo(todo); 
    }, this); 
    return this; 
    }, 
    renderTodo: function(todo) { 
    var todoView = new app.TodoView({model: todo}); 
    this.$el.append(todoView.render().el); 
    }, 
    addOneTodo: function(todo) { 
    this.renderTodo(todo); 
    }, 
    filterTodos: function(filterType) { 
    console.log('filter'); // <--- CODE DOES NOT REACH THIS LINE WHEN CALLED ON BROWSER'S REFRESH (F5) 
    var active = app.Todos.active(); 
    var completed = app.Todos.completed(); 

    if (filterType === 'active') { 
     // hide remaining 
     _.each(completed, function(todo) { 
     todo.trigger('hide'); 
     }); 
     //show active 
     _.each(active, function(todo) { 
     todo.trigger('show'); 
     }); 
    } 
    else if (filterType === 'completed') { 
     _.each(completed, function(todo) { 
     todo.trigger('show'); 
     }); 
     //show active 
     _.each(active, function(todo) { 
     todo.trigger('hide'); 
     }); 
    } 
    else if (filterType === 'all') { 
     app.Todos.each(function(todo) { 
     todo.trigger('show'); 
     }); 
    } 
    } 
}); 

Answer 1

Рассматривали ли вы с помощью Backbone марионетка? Он поставляется со встроенной встроенной паб-системой связи, что делает его очень простым в этом. В целом это дает вам отличную организацию/модульность вашего кода, используя систему sub pub.