0

やや具体的なマスター詳細シナリオを実装するための「The Ember Way」を探しています。

基本的に、アコーディオンのようなものを実装したいと考えています。タイトルをクリックすると、特定のアイテムに関する詳細情報が表示されます。

{{#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 では不可能です。

これを行う 1 つの方法は、コントローラーで折りたたまれたアイテムと開かれたアイテムを追跡することだと思いますが、これはあまりエレガントではないようです。

もう 1 つのアイデアは、アウトレットを 1 つ用意し、didInsertElement を DOM 操作で使用して正しい < li > 内に移動することでしたが、これも理想とはほど遠いものです。

どんな助けでも大歓迎です。

4

2 に答える 2

2

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

ワーキング jsbin: http://jsbin.com/ucanam/1587/edit

于 2013-10-23T09:05:10.503 に答える
0

を使いたくなるような気がしますrender。これは、Ember の非常に大まかなアコーディオン タイプの機能を示す JSBin です。

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'));
    }
  }
});
于 2013-10-04T20:05:02.860 に答える