Using the same template for multiple routes in emberjs

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.

Can you confirm that your model method is fired when you navigate back (not using the full url as you mention). I'm wondering if this is the root cause of your pain (as the model hook doesn't always fire in ember 1.x today) — Toran Billups
Hey, I put console.log("model called") in the model method and it's logging that when I transition into todos.active. I've added the logs to the question. id 2 isComplete so shouldn't be returned. — brownie3003

brownie3003 brownie3003 · Accepted Answer · 2015-05-25T22:06:54

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
        });
    }
});

Using the same template for multiple routes in emberjs

1 Answers