Ember.js view for object - templates

Question

I have simple view in my Ember.js application, like this. Each "content" element consists of two objects, first and second:
{{#each App.myController.content}}
{{view for content.first}}
{{view for content.second}}
{{/each}}
I'd like to define view for each content separately (so as not to have to write it twice), in another handlebars template script. How can I pass the first and second variables to the view?
Here is a code sample, see http://jsfiddle.net/Zm4Xg/5/:
Handlebars:
<script type="text/x-handlebars" data-template-name="contact-view">
<div>{{name}}</div>
<img {{bindAttr src="avatar"}} {{bindAttr alt="name"}}>
</script>
<script type="text/x-handlebars">
{{#each App.contactsController.pair}}
<div class="menu_vertical_group">
{{#with this.first}}
{{view App.contactView}}
{{/with}}
{{#with this.second}}
{{view App.contactView}}
{{/with}}
</div>
{{/each}}
</script>
​JavaScript:
App = Ember.Application.create();
App.Contact = Em.Object.extend({
name: null,
avatar: null
});
App.contactView = Ember.View.extend({
templateName: 'contact-view'
});
App.contactsController = Em.ArrayController.create({
content: [],
initData: function(data) {
var contacts = data.map(function(contact) {
return App.Contact.create({
"name": contact.name,
"avatar": contact.avatar
});
});
this.pushObjects(contacts);
},
pair: (function() {
content = this.get('content');
var result = [];
for (ii = 0; ii < content.length; ii += 2) {
result.pushObject({
"first": content[ii],
"second": content[ii + 1] ? content[ii + 1] : null
});
}
return result;
}).property('content')
});
App.contactsController.initData([{
"name": "John Doe",
"avatar": "/john.jpg"},
{
"name": "Someone Else",
"avatar": "/else.jpg"}]);​

Answer 1

Something like this?
{{#each App.myController.content}}
{{view MyView contentBinding="content.first"}}
{{view MyView contentBinding="content.second"}}
{{/each}}

Answer 2

You can extend the View class with a templateName function that evaluates to a different view based on a property of the model, like this:
App.customView = Ember.View.extend({
templateName:function(){
if(this.get('content').get('index') === 1){
return 'view1';
}
else{
return 'view2';
}
}.property('content.index') // custom template function based on 'index' property
});
Check out this fiddle: http://jsfiddle.net/lifeinafolder/7hnc9/