CODEWITHSUNDEEP
ember.js
Matthew Sumner
Matthew Sumner

Reputation: 346

Dynamically insert views

I could well be handling this the wrong way so please suggest alternatives if this is the case.

Lets say I have a collection view for showing many events

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

a template for the view:

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

and loading it into the app

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

Now this works great for displaying a list of events but I would like to insert these event into parts of the dom depending on their attributes. Basically I would like to call appendTo on these views but they're implicitly generated by ember magic that I'd like to retain. Is this possible or am I going to have to explicitly define these views and if so how would I do this to keep everything in sync with the EventsController content?

Upvotes: 0

Views: 1094

Answers (2)

Mudassir Ali
Mudassir Ali

Reputation: 8041

Assuming you have a list of Events and each event has a type attribute, and types would be say seminar, concert and sports

The content of App.EventsController has all the events

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

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>

Everything is now in sync with controller's content Thanks to Computed Properties

Upvotes: 2

RyanJM
RyanJM

Reputation: 7068

You can programmatically set which view should be used for each element. That would allow you to change the dom based on their attributes.

Check out the PROGRAMATIC CREATION OF CHILD VIEWS in the API section.

Hope that helps.

If you are trying to put these into different parts of the page, rather than just listing them out, then I might suggest looking into the control helper.

If this is the case, can you give a little more information on an example of where in the DOM these might be used? Might it be better to handle them by different controllers all together?

Upvotes: 1

Related Questions