Ember.js - 类似手风琴的 Master-Detail，带有 URL

Ember.js - Accordion-like master-detail with URLs

本文关键字：Master-Detail 带有 URL 手风琴 js Ember      更新时间：2023-09-26

我正在寻找"余烬之路"来实现一个有点特定的主从方案。

基本上，我想实现类似手风琴的东西，其中标题是可点击的，并显示有关特定项目的更多信息。

{{#each item in items}}
 <li>
    {{#link-to "item" item}}
        <h3>{{item.name}}</h3>
        <p>{{item.url}}</p>
    {{/link-to}}
    {{ what to use here instead of outlet }}
</li>
{{/each}}

每个项目都应该有 URL，所以我认为使用视图来显示详细信息是不行的。

无法在每个助手内使用插座 AFAIK。

我想一种方法是在控制器中跟踪折叠和打开的项目，但这似乎不是很优雅。

另一个想法是拥有一个出口并使用带有一些 DOM 操作的 didInsertElement，以便将其移动到正确的

  • - 但这远非理想。

    任何帮助将不胜感激。

    • 您不需要对所有路由使用{{outlet}}。 您可以定义仅用于设置控制器的路由。

    您需要的是将App.PersonRoute定义为手风琴路由内的嵌套路由。
    使用 App.PersonRoute 的setupController将手风琴的控制器更新为当前人员。

    例如，假设具有手风琴的模板是application模板。 定义一个名为"person"的子路由：

    App.Router.map(function() {
  this.route('person', { path: ':person_id' });
});

App.PersonRoute = Ember.Route.extend({  
  setupController: function(controller, model) {
    this.controllerFor('application').set('selected', model);
    this._super.apply(this, arguments);
  }
});

    然后，您可以使用项目控制器检查是否选择了当前人员：

    {{#each itemController='personItem'}}
  {{#linkTo "person" this}}{{name}}{{/linkTo}}
  {{#if isSelected}} 
     {{partial "person"}} {{! or whatever you wish to do }}
  {{/if}}
{{/each}}

    使用物料控制器：

    App.PersonItemController = Ember.ObjectController.extend({
  needs: 'application',
  isSelected: function() {
    return this.get('model') === this.get('controllers.application.selected');
  }.property('controllers.application.selected', 'model')
});

    工作日报：http://jsbin.com/ucanam/1587/edit

    听起来你可能想使用render . 这是一个JSBin，显示了Ember中非常粗糙的手风琴类型特征。

    http://jsbin.com/ucanam/1313/edit

    模板：

      <script type="text/x-handlebars" data-template-name="index">
    <h2>Index Content:</h2>
    <ul>
      {{#each itemController='person'}}
        <li>
          <span {{action toggleActive}}>{{firstName}} {{lastName}}</span>
          {{#if active}}
            {{render 'person' this}}
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </script>
  <script type="text/x-handlebars" data-template-name="person">
    <hr/>
      Details about {{firstName}} {{lastName}} could go here.
    <hr/>
  </script>

    路线： 

    App.IndexRoute = Ember.Route.extend({
  model: function(){
      return [
        {firstName: 'Kris', lastName: 'Selden', active:false},
        {firstName: 'Luke', lastName: 'Melia', active:false},
        {firstName: 'Formerly Alex', lastName: 'Matchneer', active:false}
      ];
  }
});

    项目控制器： 

    App.PersonController = Ember.ObjectController.extend({
  actions : {
    toggleActive : function(){
      this.set('active', !this.get('active'));
    }
  }
});
    相关文章：