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"}}

在不同的div ember.js上显示模型

1 个答案: