dimanche 24 mai 2015

{{#link-to}} helper not loading model correctly

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.




Aucun commentaire:

Enregistrer un commentaire