Emberjs - Using CollectionView and ItemController Together

I have a model Categorythat has a lot Documents. When rendering an individual, CategoryI want to list the entire child Documentsin a drag and drop sort list. I also want to double-click on any single documentone to enable inline editing for this document.

I have both parts that work there but cannot figure out how to combine them together.

For a sortable list, I use my own subclass CollectionViewfor rendering Documents, and after inserting the element, I call the html5sortable jquery plugin.

For inline editing, I set itemControllerfor each displayed document. Inside, DocumentControllerI maintained the state of the document editing application.

I am looking for information on how to combine the two approaches. It seems to me that I need to customize itemControllerfor everyone itemViewin CollectionView. I put the appropriate code below.

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> 

Thanks for any help. I really appreciate it.

+5
source share
2 answers

The secret is to set itemControllerto ArrayControllerinstead of trying to set it to view. Then, any views that are bound to this ArrayController will get the controller back instead of what is behind it.

To do this, you will need to make an explicit DocumentsController:

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

:

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

controllers.documents documents.

+2

All Articles