Question

我有一个名为Task的简单ember-data模型。当我路由到/tasks时，我可以遍历每个任务，通过我的TasksController，模板和自动生成的视图创建所有任务的列表：

{{#each task in filteredContent}}
  {{ partial "taskItem" }}
{{/each}}

filteredContent是一个观看内容的属性，以及提供App.Task.find()子集的过滤条件。

这很好用，但现在我想在我的任务列表中添加更多功能，即通过jQuery的可排序插件进行拖放排序。由于我想封装显示任务的逻辑，我创建了一个TasksListController：

App.TasksListController = Ember.ArrayController.extend {
  needs: ['tasks']
  contentBinding: 'controllers.tasks.filteredContent'
}

TasksListView：

App.TasksListView = Ember.CollectionView.extend {
  tagName: 'ul'
  classNames: ['tasks-list']
  itemViewClass: App.TasksListItemView

  didInsertElement: ->
    this._super();
    this.$().sortable().disableSelection();
}

和TasksListItemView：

App.TasksListItemView = Ember.View.extend {
  templateName: 'tasks-list-item'
  classNames: ['task-item']
}

如果我在console.log this.get 'controller.firstObject'方法中插入didInsertElement，输出是正确的，但任务模板中的{{render tasks-list}}（如果我理解正确的话，在TasksController下运行）似乎总是那里不是内容。我在使用CollectionView时遇到过一些例子，但它们似乎是RC1之前的，并建议做类似{{view 'App.TasksListView' contentBinding=filteredContent'}}的事情（这似乎也不起作用）。

在这种情况下，render或view帮助是否适当？这是解决这个问题的正确方法，还是有更好的Ember模式可供使用？

我正在使用Ember.js RC2和ember-data DS.FixtureAdapter（修订版12）。 http://jsfiddle.net/superlou/sUUXj/可以使用简化的小提琴。

Answer 1

事实证明相对简单。 CollectionView不会自动从控制器继承内容，因此必须修改视图以包含：

App.TasksListView = Ember.CollectionView.extend {
    contentBinding: 'controller'
    ...

然后可以在模板中访问内容，如下所示：

{{#linkTo task view.content}}
    {{#with view.content}}
        <div class="task-item">
            {{name}}
        </div>
    {{/with}}
{{/linkTo}}

非常感谢Ember Discuss的全景。

Answer 2

我写了一个jsbin来展示你如何轻松实现它。

http://emberjs.jsbin.com/yideji/2/edit

App.TasksListView = Ember.CollectionView.extend({
  itemViewClass: App.TasksListItemView,

  // A `CollectionView` expects its data in the `content`
  // property. But the route will set the `controller` on the view, not the `content`.
  // Using bindings allows to make that transparent to the developer.
  contentBinding: 'controller'
});

您可以添加的好处在于item视图：

App. TasksListItemView = Ember.View.extend({      
  // A view applys its `context` to the template. The `context` is usually its `controller`.
  // In the case of an item of a `CollectionView`, `context` isn't set, but `content` is.
  // So we just bind `context` to `content` so we don't have to write `view.content.myValue`
  // but `myValue` in the template
  contextBinding: 'content'
})

添加此项将允许您简化模板：

{{#linkTo task this}}
    <div class="task-item">
        {{name}}
    </div>
{{/linkTo}}

将CollectionView绑定到ArrayController

2 个答案: