Bağlantıları programsal olarak bir EmberJS görünümünde oluşturun

Question

Bir çeşit özyineleme (tipik klasör/dosya iç içe liste) içeren işlemek için oldukça karmaşık bir görünümüm var. Heterojen nesneler (klasör ve dosyalar) içermesi, Handlebars şablonlarını yazmayı daha da zorlaştırır.

Bu nedenle, bulduğum tek çözüm bir görünüm oluşturmak ve oluşturma arabelleğini el ile doldurmaktır. Ben şu çözüm ile geldi:

Şimdi

App.LibraryContentList = Ember.View.extend({ 
    tagName: 'ol', 
    classNames: ['project-list', 'dd-list'], 

    nameChanged: function() { 
    this.rerender(); 
    }.observes('content.@each.name'), 

    render: function(buffer) { 
    // We only start with depth of zero 
    var content = this.get('content').filterProperty('depth', 0); 

    content.forEach(function(item) { 
     this.renderItem(buffer, item); 
    }, this); 
    }, 

    renderItem: function(buffer, item) { 
    switch (item.constructor.toString()) { 
     case 'App.Folder': 
     this.renderFolder(buffer, item); 
     break; 
     case 'App.File': 
     this.renderFile(buffer, item); 
     break; 
    } 
    }, 

    renderFolder: function(buffer, folder) { 
    buffer.push('<li class="folder dd-item">'); 
    buffer.push('<span class="dd-handle">' + folder.get('name') + '</span>'); 

    // Merge sub folders and files, and sort them by sort order 
    var content = this.mergeAndSort(); 

    if (content.get('length') > 0) { 
     buffer.push('<ol>'); 

     content.forEach(function(item) { 
     this.renderItem(buffer, item); 
     }, this); 

     buffer.push('</ol>'); 
    } 

    buffer.push('</li>'); 
    }, 

    renderFile: function(buffer, album) { 
    buffer.push('<li class="album dd-item">'); 
    buffer.push('<span class="dd-handle">' + file.get('name') + '</span>'); 
    buffer.push('</li>'); 
    } 
}); 

, ne istediğim başka rotaya her klasör ve her dosya tıklanabilir olacak şekilde bağlantı eklemek ve yönlendirmek için muktedir olduğunu. Ama nasıl yapmalıyım, linkTo yardımcısına erişimim yok mu? LinkView görünümü ile oynamayı denedim, ancak hiç bir başarıya ulaşamadım. Her bir öğe için işleyicileri manuel olarak kaydettirmeli miyim?

Bunun yerine, bunu bir CollectionView ile ayırmayı ve içeriği derinliklerine bölmeyi, böylece şablonları kullanarak oluşturabilmeyi düşündüm, ancak daha karmaşık görünüyor.

Herhangi bir düşünce?

Answer 1

linkTo yardımcısının buna yaklaşmanın en iyi yolu olamayacağı düşünülür. linkTo tüm router.transitionTo, gereken şekilde otomatik olarak active css özellik kurulumu otomatik olarak çözüm yolları çözme yapar. Sizin durumunuzda, zaten öğe listeniz var ve bu durumda, tıklanan öğenin, Görünümün kendisinde erişilebilir olmasını sağladınız. Bu nedenle, {{#linkTo}} yardımcısı aracılığıyla LinkView dinamik olarak veya örtük olarak oluşturulduğunda, tıklatılan öğeyi işlemek için gerekli olmayabilir.

Oluşturulan öğe ankrajında ​​eski skool data-some-id'u doğrudan kurardım. Daha sonra, görünümde, tıklatıp, hangi öğenin, dataset.someId ve transitionToRoute öğelerini kullanarak, doğrudan doğruya görünümde veya denetleyicideki gotoItem aracılığıyla karşılık geldiğini hesaplayın.

Böyle birçok öğe varsa, bu, DOM öğelerinin sayısı ve Ember Görünümleri üzerinde önemli ölçüde tasarruf sağlar.

Bu jsbin'da benzer bir kurulumla denedim. Bir şablonla ProductsListView kullandım, ancak yaklaşım örnekte olduğu gibi programatik View ile benzer olacaktır. Bunun nasıl `Ember.Handlebars.compile gibi bir şey ekleme hakkında test etmedi