Ember.js 如何设计不同的数据表示（以 TodoMVC 为例）？答案

【问题标题】：Ember.js how to design different representations of Data (with TodoMVC as an example)?Ember.js 如何设计不同的数据表示（以 TodoMVC 为例）？
【发布时间】：2013-06-07 05:28:12
【问题描述】：

我想知道在 Ember.js 中设计显示同一数据模型的不同表示的最佳方式是什么。要问我的问题，我将使用TodoMVC of Ember.JS，它有 3 种 todo-data 表示：

任何待办事项，即整个待办事项列表 (TodosIndexRoute)
仍处于活动状态且未完成的待办事项 (TodosActiveRoute)
已完成的待办事项 (TodosCompletedRoute)

目前，您可以通过单击列表底部的单词来查看这 3 个中的每一个，每次都指向不同的 URL。由于目前每个表示都有一个路由，因此每个表示都有其唯一的 URL 是有意义的。主页显示整个待办事项列表 (1.)。

A.使主页显示所有 3 种表示形式（即仅在一个 URL 下）的最佳 ember.js 设计是什么？

B.在主页以及在单独的页面上显示所有 3 个的最佳设计怎么样？

目前我只想出了一个笨拙的方法和made this modified TodoMVC app，在页面底部显示不完整和完整的列表。

在 index.html 中，我添加了新的命名列表：

{{#each todosactive itemController="todo"}}
    {{ title }},
{{/each}}

在js路由中，我将TodosActiveRoute和TodosCompletedRoute复制到了TodoIndexRoute中，这是代码重复，很糟糕。

Todos.TodosIndexRoute = Ember.Route.extend({
    setupController: function () {
        var todos = Todos.Todo.find();
        this.controllerFor('todos').set('filteredTodos', todos);

        var todos_active = Todos.Todo.filter(function (todo) {
            if (!todo.get('isCompleted')) {
                return true;
            }
        });

        this.controllerFor('todos').set('todosactive', todos_active);

        ...
});

我觉得我错过了一种优雅的方式，但我目前对 ember.js 的了解非常有限。我应该使用{{partial}}、{{render}}、render 还是别的什么？

我尝试了{{ partial }} 和{{ render }}，但我尝试了can't get them to display any data 。

感谢您的帮助。

【问题讨论】：

标签： ember.js todomvc

【解决方案1】：

A) Ember 尝试与 url 密切合作。这是一件好事，因为如果你想共享一个 url，视图应该是一致的。 url 是一个强大的工具，每个唯一的 url 都应该链接到同一个唯一的页面。拥有一个链接到多个视图的 url 不是很好，当然也不是可共享的。如果您有时间，请收听Tom Dale 和Yehuda Katz 的演讲，了解有关 ember 的有趣概述以及他们正在尝试做的事情。

B) 您可以在一个页面上包含不同的视图。查看the guides，尤其是rendering templates 和using helpers，了解有关在一个网址下包含不同视图的更多信息。

【讨论】：

【解决方案2】：

A) 要在一个视图中显示所有 3 个表示，我们实际上只需要在单个路线中的基本模型。 controller 的关键是为您提供该模型的风格。另一个重要的事情是在车把模板中使用数据绑定。可以看到运行版本here。

在 IndexRoute 中，添加一个获取普通 todos 列表的模型：

Todos.TodosIndexRoute = Ember.Route.extend({
    model: function(params) {
        return Todos.Todo.find();
    },
    ...

制作一个不需要任何东西的 TodosListView：

Todos.TodoListView = Ember.View.extend();

在控制器中，添加 2 个返回所需数组的计算属性：

Todos.TodosController = Ember.ArrayController.extend({
    ...
    todosActive: function() {
        return this.filterProperty('isCompleted', false);
    }.property('@each.isCompleted'),

    todosCompleted: function() {
        return this.filterProperty('isCompleted', true);
    }.property('@each.isCompleted'),
    ...

最后，在 HTML 模板中：

<script type="text/x-handlebars" data-template-name="todos">
    Active:
    {{#view Todos.TodoListView lalaBinding="todosActive"}}
        {{#each view.lala}}
               {{title}},
        {{/each}}
    {{/view}}

    Completed:
    {{#view Todos.TodoListView dataBinding="todosCompleted"}}
        {{#each view.data}}
                {{title}},
        {{/each}}
    {{/view}}

</script>

注意dataBinding。

感谢#emberjs irc 上的人们提供帮助。

【讨论】：