Question

尝试使用ember 1.12和ember-cli进行Ember指导todo app。当我从索引导航到活动（和完整）路径时，它不会过滤，显示所有记录。如果我直接转到网址，过滤工作正常

在我的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.js。

import Ember from 'ember';

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

我尝试添加索引路径，将模型设置为待办事项中的待办事项模型。

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

我设法让它发挥作用。我想通过显式地将routes模型传递给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
        });
    }
});

在emberjs中为多个路径使用相同的模板

1 个答案: