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