5

多くのモデルCategoryがありDocumentsます。個人をレンダリングするとき、すべての子をドラッグ アンド ドロップでソート可能なリストCategoryにリストしたいと考えています。documentsまた、個人をダブルクリックしてdocument、そのドキュメントのインライン編集を許可したいと考えています。

両方のパーツを単独で動作させましたが、それらをマージする方法がわかりません。

ソート可能なリストについては、 のカスタム サブクラスを使用してCollectionViewをレンダリングしdocuments、要素を挿入した後、html5sortable jquery プラグインを呼び出します。

インライン編集では、レンダリングされるitemControllerfor eachを設定します。document内部ではDocumentController、ドキュメントを編集するアプリケーションの状態を維持しました。

2つのアプローチを組み合わせる方法についての洞察を探しています。私が必要だと思うのは、 でitemControllerfor eachitemViewをセットアップする方法CollectionViewです。関連するコードを以下に示します。

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>

助けてくれてありがとう。心から感謝する。

4

2 に答える 2

2

秘密は、ビューに設定しようとするのではなく、itemControllerあなたに設定することです。ArrayController次に、その 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。

于 2013-03-23T22:20:16.237 に答える