1

我有一个简单的 ember 数据模型，称为任务。当我路由到 时/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'
}

一个任务列表视图：

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}}在 Tasks 模板中（如果我理解正确，在 TasksController 下操作）似乎总是没有内容。我遇到了一些使用 CollectionView 的例子，但它们似乎是 RC1 之前的，并建议做类似的事情{{view 'App.TasksListView' contentBinding=filteredContent'}}（这似乎也不起作用）。

在这种情况下，使用renderor viewhelper 是否合适？这是解决这个问题的正确方法，还是有更好的 Ember 模式可以遵循？

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

4

2 回答 2

4

结果是相对简单的。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的 panoptic 。

于 2013-04-17T23:31:36.793 回答
0

我写了一个 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}}
于 2014-09-16T18:46:21.273 回答