ember.js - Selecting view type based on model -
i have list of items i'm trying display ember. each of these items, i'd able dynamically select view type use display based on "message_type" field in each model.
i have this, totally sucks , not scalable:
{{#each message in controller}} {{#if message.isimage}} {{view app.imagemessageview}} {{/if}} .... {{#if message.isvideo}} {{view app.videomessageview}} {{/if}} {{/each}}
how can dynamically select view based on model's field in ember?
here similar question showed 2 ways this: collection of objects of multiple models iterable content in template in ember.js
rendering items based on property or type
i know of 2 ways this:
- add boolean property each object , use handlebars
{{#if}}
check property , render correct view - extend
ember.view
, use computed property switch template rendered based on type of object being rendered (based on select view template model type/object value using ember.js)
method 1
js:
app.post = ember.object.extend({ ispost: true }); app.bookmark = ember.object.extend({ isbookmark: true }); app.photo = ember.object.extend({ isphoto: true });
template:
<ul> {{#each item in controller.stream}} {{#if item.ispost}} <li>post: {{item.name}} {{item.publishtime}}</li> {{/if}} {{#if item.isbookmark}} <li>bookmark: {{item.name}} {{item.publishtime}}</li> {{/if}} {{#if item.isphoto}} <li>photo: {{item.name}} {{item.publishtime}}</li> {{/if}} {{/each}} </ul>
method 2
js:
app.streamitemview = ember.view.extend({ tagname: "li", templatename: function() { var content = this.get('content'); if (content instanceof app.post) { return "streamitempost"; } else if (content instanceof app.bookmark) { return "streamitembookmark"; } else if (content instanceof app.photo) { return "streamitemphoto"; } }.property(), _templatechanged: function() { this.rerender(); }.observes('templatename') })
template:
<ul> {{#each item in controller.streamsorted}} {{view app.streamitemview contentbinding=item}} {{/each}} </ul>
jsbin example - unsorted list rendered method 1, , sorted list rendered method 2
Comments
Post a Comment