라우터가 전역 변수를 사용하지 않고 뷰와 어떻게 대화 할 수 있습니까?

Question

페이지를 다시로드 한 후 (Ctrl + F5) filterTodos 메서드가 호출되지 않은 이유를 백본 앱 (Todo 앱)에서 이해할 수 없습니다. 내가 단순히 Todos ("Active", "Completed")를 필터링하는 링크를 클릭하면 호출됩니다.

아래 링크에서이 기능을 볼 수 있습니다. 아무리 당신이 브라우저에서 새로 고침을 클릭 몇 번 - 정확한 필터링 된 결과가 표시되지 않습니다 :

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

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

내가 Router 너무 일찍부터 filter 이벤트를 트리거하고 있기 때문에하다는 이론을 본 - TodosView은 아직 초기화되지 않았으므로 listenTofilter 이벤트가 아직 없습니다.

그러나이 View이 아직 존재하지 않는 경우 Router은 View에 필터를 기반로 자체 렌더링을 알릴 수 있습니까? 내가 한 것처럼 Router에서 일부 이벤트를 트리거하여 달성 할 수 없습니까? 한 가지 가능한 옵션은 전역 변수 app.FilterState을 갖는 것입니다.

라우터와 비공개 아직보기 사이에 다른 통신 방법이 있습니까?

는 app.FilterState 위해 나는 Router의 상태를 설정하고 다음보기에서 그것을 확인하고 수동과 같이 filterTodos 함수를 호출하고 그것은 작동합니다

뷰/

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

을 todos.js 기존 소스 코드 :

라우터/라우터 .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(); 

뷰/

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

당신이 백본 마리오네트를 사용하여 생각 해 봤나 todos.js? 그것은 내장 슈퍼 게시 통신 시스템이 내장되어있어 쉽게 할 수 있습니다. 전반적으로 pub 서브 시스템을 사용하여 코드의 훌륭한 조직/모듈화를 제공합니다.