Insérer dynamiquement des vues

Question

Je pourrais bien être en train de manipuler ceci de manière incorrecte alors s'il vous plaît suggérer des alternatives si c'est le cas.

Disons que j'ai une vue de collection pour montrer de nombreux événements

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

un modèle pour la vue:

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

et le charger dans l'application

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

Maintenant, ce fonctionne très bien pour afficher une liste d'événements, mais je voudrais insérer ces événements dans certaines parties de la dom depen ding sur leurs attributs. Fondamentalement, je voudrais appeler appendTo sur ces vues, mais elles sont implicitement générées par la magie de braise que j'aimerais conserver. Est-ce possible ou vais-je devoir définir explicitement ces vues et si oui, comment est-ce que je ferais ceci pour garder tout synchronisé avec le contenu de EventsController?

Answer 1

Vous pouvez définir par programme quelle vue doit être utilisée pour chaque élément. Cela vous permettrait de changer la dom en fonction de leurs attributs.

Consultez la section PROGRAMATIC CREATION OF CHILD VIEWS dans la section API.

Espérons que ça aide.

---

Si vous essayez de les mettre en différentes parties de la page, plutôt que de les énumérer dehors, je pourrais suggérer à la recherche dans l'aide control.

Si tel est le cas, pouvez-vous donner un peu plus d'informations sur un exemple d'où dans le DOM ceux-ci pourraient être utilisés? Serait-il préférable de les manipuler par différents contrôleurs tous ensemble?

Answer 2

En supposant que vous avez une liste d'événements et chaque événement a un attribut de type et types serait dire séminaire, concert et sport

Le contenu de App.EventsController a tous les événements

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> 

Tout est maintenant synchronisé avec le contenu du contrôleur Merci à Propriétés calculées