在emberjs中为多条路线使用相同的模板

Question

尝试做Ember指导todo应用与ember 1.12和ember-cli。当我从索引导航到活动（和完整）路由时，它不会过滤，显示所有记录。如果我直接去URL过滤正常工作

在我的todos.hbs模板。

{{input type="text" id="new-todo" placeholder="What needs to be done?" 
value=newTitle action="createTodo"}} 

<section id="main"> 
    {{outlet}} 

    <input type="checkbox" id="toggle-all"> 
</section> 

<footer id="footer"> 
    <span id="todo-count"> 
     <strong>2</strong> todos left 
    </span> 
    <ul id="filters"> 
     <li> 
      {{#link-to "todos.index" activeClass="selected"}}All{{/link-to}} 
     </li> 
     <li> 
      {{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}} 
     </li> 
     <li> 
      {{#link-to "todos.complete" activeClass="selected"}}Complete{{/link-to}} 
     </li> 
    </ul> 

    <button id="clear-completed"> 
     Clear completed (1) 
    </button> 
</footer> 

这是路由todos/active.js。

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function(){ 
     return this.store.filter('todo', function(todo) { 
      return !todo.get('isCompleted'); 
     }); 
    }, 
    renderTemplate: function() { 
     this.render('todos.index'); 
    } 
}); 

我的todos.index模板是这样的。

<ul id="todo-list"> 
    {{#each todo in model}} 
     {{todo-item acceptChanges="acceptChanges" deleteTodo="deleteTodo" todo=todo}} 
    {{/each}} 
</ul> 

我的todos路线（在索引上工作正常）todos.js。

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
     return this.store.find('todo'); 
    }, 
    actions: { 
     // some actions // 
    } 
}); 

我已经尝试添加一个索引路由设置的模型作为导师todos模型。

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
     return this.modelFor('todos'); 
    } 
}); 

这没有奏效。控制台不会给出任何错误。

从调查我怀疑这是与从todos.index切换到todos.active时不重新呈现索引模板，因为他们使用相同的模板。我刚刚尝试添加一个active.hbs模板，它与我的索引相同，并且工作正常。不知道如何强制重新渲染，或者我是否通过使用相同的模板索引，活动和完成而犯了一个错误。我相信我应该可以使用相同的模板，否则我有三个模板的内容完全相同。

当我记录内部转换并将活动路由更改为以下内容时。

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function(){ 
     console.log("model hook called"); 
     return this.store.filter('todo', function(todo) { 
      console.log(todo); 
      return !todo.get('isCompleted'); 
     }); 
    }, 
    renderTemplate: function() { 
     this.render('todos.index'); 
    } 
}); 

这是输出。

Attempting transition to todos.active 
ember.debug.js:44970 Transition #6: todos.active: calling beforeModel hook 
ember.debug.js:44970 Transition #6: todos.active: calling deserialize hook 
active.js:7 model hook called 
active.js:9 Class {id: "1", store: Class, container: Container, _changesToSync: Object, _deferredTriggers: Array[0]…} 
active.js:9 Class {id: "2", store: Class, container: Container, _changesToSync: Object, _deferredTriggers: Array[0]…} 
active.js:9 Class {id: "3", store: Class, container: Container, _changesToSync: Object, _deferredTriggers: Array[0]…} 
ember.debug.js:44970 Transition #6: todos.active: calling afterModel hook 
ember.debug.js:44970 Transition #6: Resolved all models on destination route; finalizing transition. 
ember.debug.js:44970 Transition #6: TRANSITION COMPLETE. 

Answer 1

我已设法使其正常工作。我认为通过显式传递路径模型到renderTemplate函数。

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function(){ 
     return this.store.filter('todo', function(todo) { 
      return !todo.get('isCompleted'); 
     }); 
    }, 
    renderTemplate: function(controller, model) { 
     this.render('todos.index', { 
      model: model 
     }); 
    } 
});