Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This is just off the top of my head: I would create a separate template/view for each model type. E.g. there would be a <code>DesignView</code>, <code>OrderView</code>, etc. Each of these would specify the template to use with templateName (all code coffeescript):</p> <pre><code>App.DesignView = Em.View.extend templateName: 'design' App.OrderView = Em.View.extend templateName: 'order' </code></pre> <p>All of the custom rendering for each type would be done inside the view/template.</p> <p>At this point we need to have some template logic to decide which view to show for each item. The <em>easiest</em> thing to do would be to store the viewType on the model.</p> <pre><code>App.Design = Em.Model.extend viewType: App.DesignView App.Order = Em.Model.extend viewType: App.OrderView </code></pre> <p>Then the template could look like:</p> <pre><code>{{#collection contentBinding="App.selectedAccountController.everythingSorted"}} {{view content.viewType contentBinding="content"}} {{/collection}} </code></pre> <p>This is not ideal, however, since we don't want the model to know about the view layer. Instead, we could create some factory logic to create a view for a model. Then we could create a computed property on the controller which contains an array of the models and their corresponding views:</p> <pre><code>App.selectedAccountController = Em.ArrayController.create .. viewForModel: (model) -&gt; # if model is instance of Design return DesignView, Order return OrderView etc. everythingSortedWithViews: ( -&gt; everythingSorted.map (model) -&gt; {model: model, viewType: @viewForModel(model)} ).property('everythingSorted') </code></pre> <p>The template would then look like this:</p> <pre><code>{{#collection contentBinding="App.selectedAccountController.everythingSortedWithView"}} {{view content.viewType contentBinding="content.model"}} {{/collection}} </code></pre> <p>There are probably better ways to do this. I would love to hear someone who is closer to the core of Ember give a solution.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload