Emberjs - CollectionView ve ItemController öğelerini birlikte kullanın

Question

Birçok Documents ürününe sahip Category modelim var. Bireysel bir Category görüntülerken, documents alt öğesinin tümünü sürükleyip bırakılabilir bir listede listelemek istiyorum. Ayrıca, bu belge için satır içi düzenlemeye izin vermek için herhangi bir kişiye document çift tıklamak istiyorum.

Her iki parçanın da üzerinde çalışıyorum, ama onları nasıl birleştireceklerini anlayamıyorum.

Sıralanabilir liste için CollectionView özel alt sınıfını kullanıyorum ve documents öğesini ekledikten sonra öğeyi ekledikten sonra html5sortable jquery eklentisini arıyorum.

Satır içi düzenleme için, oluşturulmakta olan her document için bir itemController ayarlayın. DocumentController'un içinde, belgeyi düzenleme işleminin durumunu sürdürdüm.

İki yaklaşımın nasıl birleştirileceği hakkında bilgi arıyorum. İhtiyacım olan şey, CollectionView'daki her itemView için bir itemController kurmak için bir yoldur. İlgili kodu aşağıya koydum.

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> 

Yardımlarınız için teşekkür ederiz. Gerçekten takdir ediyorum.

Answer 1

Buradaki sır, ArrayController10 numaranıza itemController ayarını ayarlamak yerine onu ayarlamaya çalışmaktır. Ardından, ArrayController'a bağlanan tüm görünümler, arkasında ne olursa olsun, bir denetleyici geri alır.

Bunu yapmak için, bir DocumentsController açık hale gerekecek:

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

ve ardından kategorilerinde:

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

Şimdi, şablonları, bağlama controllers.documents yerine documents için .

Answer 2

bu çözülecek üzeredir Ember bir hata olduğunu düşünüyorum:

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