Using the same template for multiple routes in emberjs - ember.js

Question

Trying to do Ember guides todo app withe ember 1.12 and ember-cli. When I navigate to the active (and complete) route from the index it does not filter, shows all records. If I go directly to url the filtering works correctly
In my todos.hbs template I have.
{{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>
This is the route 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');
}
});
My todos.index template is this.
<ul id="todo-list">
{{#each todo in model}}
{{todo-item acceptChanges="acceptChanges" deleteTodo="deleteTodo" todo=todo}}
{{/each}}
</ul>
My todos route (works fine on the index) todos.js.
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('todo');
},
actions: {
// some actions //
}
});
I've tried adding an index route which set's the model as the todos model as in the guides.
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.modelFor('todos');
}
});
That did not work. Console does not give any error.
From investigation I suspect it's something to do with not re-rendering the index template when switching from todos.index to todos.active, because they are using the same template. I've just tried to add a active.hbs template that is the same as my index and that works. Not sure how to force the re-render or whether I'm making a mistake by using the same template for index, active and complete. I'm sure I should be able to use the same template otherwise I have three templates with exactly the same content.
When I log internal transitions and change the active route to the following.
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');
}
});
This is the output.
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

I have managed to get it to work. I think by explicitly passing in the routes model to the renderTemplate function.
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
});
}
});