1

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

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

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

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

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

目前我只是想出了一个笨拙的方法，并制作了这个修改过的 TodoMVC 应用程序，它在页面底部显示不完整和完整的列表。

在 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 }}，但我无法让它们显示任何数据。

感谢您的帮助。

4

2 回答 2

0

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

B）您可以在一页上包含不同的视图。查看指南，尤其是关于渲染模板和使用帮助程序的指南，以获取有关在一个 url 下包含不同视图的更多信息。

于 2013-06-07T07:22:24.727 回答
0

A）要在一个视图中显示所有 3 个表示，我们实际上只需要在单个路线中的基本模型。关键是控制器为您提供该模型的风味。另一件重要的事情是在车把模板中使用数据绑定。您可以在此处查看正在运行的版本。

在 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 上的人们提供帮助。

于 2013-06-07T19:27:35.097 回答