Динамически вставлять виды

Question

Я мог бы правильно обработать это неправильно, поэтому, пожалуйста, предложите альтернативы, если это так.

Допустим, у меня есть представление коллекции для показа многих событий

App.EventsView = Ember.CollectionView.extend({ 
    contentBinding: "controller.content", 
    itemViewClass: Ember.View.extend({ 
    templateName: "event" 
    }) 
}) 

шаблон для вида:

<div class="event">{{ view.content.name }}</div> 

и загрузить его в приложение

{{#if content.isLoaded}} 
    {{ view "ScheduleApp.EventsView" }} 
{{else}} 
    Loading... 
{{/if}} 

Теперь это отлично подходит для отображения списка событий, но я хотел бы вставить это событие в части dom depen на их атрибуты. В основном я хотел бы назвать appendTo на этих представлениях, но они неявно сгенерированы магией ember, которую я хотел бы сохранить. Возможно ли это, или мне придется явно определить эти представления, и если да, то как бы я это сделал, чтобы сохранить все в синхронизации с контентом EventsController?

Answer 1

Вы можете программно установить, какой вид должен использоваться для каждого элемента. Это позволит вам изменить дом на основе их атрибутов.

Обратитесь к разделу PROGRAMATIC CREATION OF CHILD VIEWS в разделе API.

Надеюсь, что это поможет.

---

Если вы пытаетесь поставить их в разные части страницы, а не просто перечислить их, то я мог бы предположить, глядя в control помощника.

Если это так, можете ли вы дать немного больше информации о примере того, где в DOM они могут быть использованы? Может быть, лучше справиться с ними с помощью разных контроллеров?

Answer 2

Предполагая, что вы список событий и каждое событие имеет атрибут типа, а также типы бы сказать семинар, концерт и спортивные

Содержание App.EventsController имеет все события

App.EventsController = Ember.ArrayController.extend({ 
    seminars: function(){ 
    return this.get("content").filterProperty("type", "seminar"); 
    }.property("content.@each.type") 
    concerts: function(){ 
    return this.get("content").filterProperty("type", "concerts"); 
    }.property("content.@each.type"), 
    sports: function(){ 
    return this.get("content").filterProperty("type", "sports"); 
    }.property("content.@each.type") 
}) 

App.BaseEventView = Ember.CollectionView.extend({ 
    itemViewClass: Ember.View.extend({ 
    templateName: 'event' 
    }) 
}) 

App.SeminarsView = Ember.BaseEventView.extend({ 
    contentBinding: 'controller.seminars' 
}) 

App.ConcertsView = Ember.BaseEventView.extend({ 
    contentBinding: 'controller.concerts' 
}) 

App.SportsView = Ember.BaseEventView.extend({ 
    contentBinding: 'controller.sports' 
}) 

App.EventsView = Ember.View.extend({templateName: 'events'}); 

<script type="text/x-handlebars" data-template-name="events"> 
    {{#if content.isLoaded}} 
    {{view App.SeminarsView}} 
    {{view App.ConcertsView}} 
    {{view App.SportsView}} 
    {{else}} 
    Loading... 
    {{/if}} 
</script> 

Все теперь синхронизируется с содержимым контроллера Благодаря Вычислительные свойства