displaying models on different div ember.js - ruby-on-rails-3

Question

In Ember.js, what is the best way to display a models properties?
Say my model is 'products' so I have a product list, when I click on an item on that list I want the details displayed in another div and not override that view.
How can I do this, below if my code.
<script type="text/x-handlebars">
{{ view App.ListReleasesView }}
</script>
<script type="text/x-handlebars">
{{ view App.ReleaseDataView }}
</script>
App.ListReleasesView = Ember.View.extend({
templateName: 'app/templates/releases/list',
releasesBinding: 'App.releasesController',
showNew: function() {
this.set('isNewVisible', true);
},
hideNew: function() {
this.set('isNewVisible', false);
},
refreshListing: function() {
App.releasesController.findAll();
}
});
App.selectedReleaseController = Ember.Object.create({
release: null
});
list template:
<ul>
{{#each releases}}
{{view App.ShowReleaseView releaseBinding="this"}}
{{/each}}
</ul>
{{#if isNewVisible}}
{{view App.NewReleaseView}}
{{/if}}
<div class="commands">
<a href="#" {{action "showNew"}}>New Release</a>
<a href="#" {{action "refreshListing"}}>Refresh Listing</a>
</div>
App.ShowReleaseView = Ember.View.extend({
templateName: 'app/templates/releases/show',
//classNames: ['show-release'],
classNameBindings: ['isSelected'],
// tagName: 'tr',
doubleClick: function() {
// this.showEdit();
// this.showRelease();
var release = this.get("release");
App.selectedReleaseController.set("release", release);
},
isSelected: function(){
var selectedItem = App.selectedReleaseController.get("release");
release = this.get("content");
if (release === selectedItem) {return true; }
}.property('App.selectedReleaseController.release')
show template:
{{#if App.selectedReleaseController.release}}
{{view App.ReleaseDataView}}
{{else}}
{{release.name}}
{{/if}}
App.ReleaseDataView = Ember.View.extend({
templateName: 'app/templates/releases/releaseData',
releaseBinding: 'App.selectedReleaseController.release',
// classNames: ['release'],
});
release template:
{{#if isSelected}}
<div class="name">
{{editable "release.name"}} {{editable "release.description"}}
</div>
{{/if}}

Answer 1

You'll want to have a simple controller whose job will be managing the selection state.
App.selectedReleaseController = Ember.Object.create({
content: null
});
Then you'll have another view, for the details, which is bound to that controller.
{{view App.ReleaseDetailsView releaseBinding="App.selectedReleaseController.content"}}