異なるdivのモデルを表示するember.js

Question

Ember.jsでは、モデルのプロパティを表示する最善の方法は何ですか？

私のモデルは「製品」なので、製品リストがあるので、そのリストのアイテムをクリックすると、詳細が別のdivに表示され、そのビューが上書きされません。

私のコードは以下の通りです。

<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 
}); 

リストテンプレート：

<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') 

ショーテンプレート：

{{#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'], 


}); 

リリーステンプレート：

{{#if isSelected}} 

    <div class="name"> 
    {{editable "release.name"}} {{editable "release.description"}} 
    </div> 

    {{/if}} 

Answer 1

あなたはその仕事になります簡単なコントローラを持っているしたいと思います選択状態を管理する。

App.selectedReleaseController = Ember.Object.create({ 
    content: null 
}); 

詳細については、そのコントローラにバインドされている別のビューがあります。

{{view App.ReleaseDetailsView releaseBinding="App.selectedReleaseController.content"}}