在 emberjs 中对多个路由使用相同的模板答案

【问题标题】：Using the same template for multiple routes in emberjs在 emberjs 中对多个路由使用相同的模板
【发布时间】：2015-05-24 13:59:27
【问题描述】：

尝试使用 ember 1.12 和 ember-cli 执行 Ember 指南 todo 应用程序。当我从索引导航到活动（和完整）路由时，它不会过滤，显示所有记录。如果我直接转到 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.

【问题讨论】：

您能否确认您的模型方法在您向后导航时被触发（而不是使用您提到的完整网址）。我想知道这是否是您痛苦的根本原因（因为模型钩子在今天的 ember 1.x 中并不总是触发）
嘿，我把 console.log("model called") 放在模型方法中，当我转换到 todos.active 时它会记录下来。我已将日志添加到问题中。 id 2 已完成，因此不应返回。

标签： ember.js ember-data

【解决方案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
        });
    }
});

【讨论】：