Emberjs - 一起使用 CollectionView 和 ItemController答案

【问题标题】：Emberjs - Using CollectionView and ItemController togetherEmberjs - 一起使用 CollectionView 和 ItemController
【发布时间】：2013-03-13 08:33:31
【问题描述】：

我有一个模型 Category，它有很多 Documents。渲染个人Category 时，我想在拖放可排序列表中列出所有子documents。我还想双击任何个人 document 以允许对该文档进行内联编辑。

我让这两个部分自己工作，但似乎无法弄清楚如何将它们合并在一起。

对于可排序列表，我使用CollectionView 的自定义子类来呈现documents，并在插入元素后调用html5sortable jquery 插件。

对于内联编辑，我为每个正在渲染的 document 设置一个 itemController。在DocumentController里面我维护了编辑文档的应用状态。

我正在寻找有关如何结合这两种方法的见解。我认为我需要一种为CollectionView 中的每个itemView 设置itemController 的方法。我已经把相关代码放在下面了。

App.SortableView = Ember.CollectionView.extend({
    tagName: 'ul',
    itemViewClass: 'App.SortableItemView', 

    didInsertElement: function(){
        var view = this;
        Ember.run.next(function() {
        $(view.get('element')).sortable();
        });
    }
});

App.SortableItemView = Ember.View.extend({
    templateName: 'sortable-item',
    doubleClick: function() {
        //This should ideally send 'editDocument' to controller
    }
});

App.DocumentController = Ember.ObjectController.extend({
    isEditing:false,
    editDocument: function () {
        this.set('isEditing', true);
    },
    finishedEditing: function() {
        var model = this.get('model');
        model.get('store').commit();
        this.set('isEditing', false);
    }
});

<script type="text/x-handlebars" data-template-name="category">
    <h1>{{ name }}</h1>

    <h2>Documents</h2>
    <!-- This makes a sortable list -->
    {{view App.SortableView contentBinding="documents"}}

    <!-- This makes an editable list -->
    {{#each documents itemController="document"}}
        <!-- change markup dependent on isEditing being true or false -->
    {{/each}}

    <!-- How do I combine the two -->
</script>

感谢您的帮助。真的很感激。

【问题讨论】：

标签： javascript ember.js collectionview

【解决方案1】：

秘诀是在您的ArrayController 上设置itemController，而不是尝试在视图上设置它。然后，任何绑定到该 ArrayController 的视图都将得到一个控制器，而不是它背后的任何内容。

要做到这一点，你必须明确DocumentsController：

App.DocumentsController = Ember.ArrayController.extend({
    needs: ['category'],
    contentBinding: 'controllers.category.documents',
    itemController: 'document'
});

然后在您的类别中：

App.CategoryController = Ember.ObjectController.extend({
    needs: ['documents']

现在，在您的模板中，绑定到 controllers.documents 而不是 documents。

【讨论】：

感谢克里斯托珀。这一切都说得通，但似乎对我不起作用。我像你说的那样实现了 DocumentsController，但是如果我在 sortable-item 模板中记录 controller，控制器仍然是 category 控制器。这是使用 CollectionView 的调用：{{view App.SortableView contentBinding="controller.documents" }} 我错过了什么吗？
在您要引用的单个视图中content。发生的事情是DocumentsController 透明地返回一个DocumentController 包裹在每个document 周围。 CollectionView 不知道也不关心这种情况正在发生：它仍然将返回的值设置为 content。如果您愿意，可以将 controller 绑定到 itemView 类的 content 属性。
谢谢克里斯托弗。我必须仍然缺少一些明显的东西。在我的模板/视图中，如果我注销内容，它是 App.Document 的一个实例，而不是 App.DocumentController，所以由于某种原因，文档控制器仍然只是提供文档，而不是控制器包装的文档。我会尝试修改我拥有的代码。感谢您的宝贵时间。
奇怪。如果您将小提琴甚至只是相关文件的要点放在一起，我可以看一下。
是的，有些奇怪。我确实发现了一个错字，我使用的是controller.documents 而不是controllers.documents。现在双击事件到达它需要的位置，它调用DocumentController 上的editDocument。但是sortable-item 模板中的数据仍然不正确。数据来自CategoryController（我可以说是因为类别和文档都有名称。）gist.github.com/raytiley/5230046 再次感谢。你真的超越了。我欠你一杯美味的饮料。

【解决方案2】：

我认为这是 Ember 中的一个错误，即将解决：

https://github.com/emberjs/ember.js/issues/4137

【讨论】：