javascript - Emberjs - 一起使用 CollectionView 和 ItemController

Question

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

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

对于可排序列表，我使用 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> 

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

Answer 1

secret 是在您的 ArrayController 上设置 itemController 而不是尝试在 View 上设置它。然后，任何绑定(bind)到该 ArrayController 的 View 都将取回一个 Controller ，而不是它背后的任何内容。

为此，您必须创建一个显式的 DocumentsController:

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

然后在您的类别中:

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

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