在不同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"}}