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:

1. add boolean property each object , use handlebars {{#if}} check property , render correct view
2. 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