Emberjs - Używanie CollectionView i ItemController razem

Question

Mam model Category, który ma wiele Documents. Podczas renderowania indywidualnego Category chcę wyświetlić listę wszystkich potomków documents na liście do sortowania z opcją przeciągania i upuszczania. Chcę również podwójne kliknięcie na dowolnej jednostce document, aby umożliwić bezpośrednią edycję tego dokumentu.

Dwie części pracuję samodzielnie, ale nie mogę wymyślić, jak je połączyć.

Dla listy do sortowania używam niestandardowej podklasy CollectionView do renderowania documents, a po wstawieniu elementu wywołuję wtyczkę jquery html5sortable.

Do edycji bezpośredniej ustawiam itemController dla każdego renderowanego obiektu document. Wewnątrz DocumentController utrzymałem stan aplikacji edycji dokumentu.

Szukam informacji na temat łączenia obu podejść. Myślę, że potrzebuję sposobu na skonfigurowanie itemController dla każdego itemView w CollectionView. Podałem odpowiedni kod poniżej.

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> 

Dzięki za pomoc. Naprawdę to doceniam.

Answer 1

Sekret polega na tym, aby ustawić itemController na swoim ArrayController zamiast próbować ustawić go w widoku. Następnie wszelkie widoki wiążące się z tym ArrayControllerem otrzymają kontroler z powrotem zamiast jakiejkolwiek zawartości za nim.

Aby to zrobić, będziesz musiał dokonać wyraźnego DocumentsController:

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

a następnie w swoich kategoriach:

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

Teraz w szablonach, wiążą się controllers.documents zamiast documents .

Answer 2

myślę, że jest to błąd w Ember, który ma być rozwiązany:

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