Ember.js

Question

kullanarak model türüne/nesne değerine göre görünüm şablonunu seçin Aynı denetleyici içerik dizisinde farklı nesneleri depolamak ve her birini uygun bir görünüm şablonu kullanarak, ancak ideal olarak aynı görünümü kullanarak oluşturmak istiyorum.

Aşağıdaki nesneleri kullanarak liste nesneleri çıkarıyorum. Şu anda aynılar ama farklı olanları kullanmak istiyorum.

<script type="text/x-handlebars"> 
    {{#each App.simpleRowController}} 
    {{view App.SimpleRowView class="simple-row" contentBinding="this"}} 
    {{/each}} 
</script> 

Görünümün kesilmiş bir sürümü aşağıdadır. Dahil etmediğim diğer işlevler, modelden bağımsız olarak herhangi bir nesneden kullanılabilir. Bu yüzden ideal olarak tek bir görüşüm var (her ne kadar yardımcı olabileceğine dair yardımcı olabilecek mikroplar hakkında bazı makaleler okudum). izin veren farklı nesne tipe

<script> 
    App.SimpleRowView = Em.View.extend({ 
    templateName: 'simple-row-preview', 
    }); 
</script> 

Benim ilk birkaç testler 'basit sıralı-önizleme' içindeki koşulların yükleri ile sona erdi - bu korkunç görünüyordu!

Şablon dizimi veya içerik dizilimin üzerinde yinelenirken kullanılan görünümü dinamik olarak kontrol etmenin herhangi bir yolu var mı?

GÜNCELLEME

sayesinde iki katılımcılara çok. Görünümde kullanılan son kod aşağıdadır. Modellerimden bazıları benzerdir ve uygulamamda şablon (veya bir çeşit 'durum') arasında geçiş yapabilmeyi tercih ettim.

<script> 
    App.SimpleRowView = Em.View.extend({ 
    templateName: function() { 
     return Em.getPath(this, 'content.template'); 
    }.property('content.template').cacheable(), 
    _templateChanged: function() { 
     this.rerender(); 
    }.observes('templateName'), 
    // etc. 
    }); 
</script> 

Answer 1

TemplateName özelliğini bir özellik haline getirebilir ve ardından içeriğe göre hangi şablonun kullanılacağını belirtebilirsiniz. Örneğin

bu nesne türüne bağlı olarak bir şablon ayarlamak için InstanceOf kullanır: burada

App.ItemView = Ember.View.extend({ 
    templateName: function() { 
     if (this.get("content") instanceof App.Foo) { 
      return "foo-item"; 
     } else { 
      return "bar-item"; 
     } 
    }.property().cacheable() 
}); 

yukarıda bir uygulama örneğinin bir keman verilmiştir: http://jsfiddle.net/rlivsey/QWR6V/

Answer 2

çözeltisine göre @ rlivsey, bir özellik değişiklikleri, Bu çok iyi bir cevaptır, fakat maalesef http://jsfiddle.net/pangratz666/ux7Qa/

App.ItemView = Ember.View.extend({ 
    templateName: function() { 
     var name = Ember.getPath(this, 'content.name'); 
     return (name.indexOf('foo') !== -1) ? 'foo-item' : 'bar-item'; 
    }.property('content.name').cacheable(), 

    _templateChanged: function() { 
     this.rerender(); 
    }.observes('templateName') 
});