4

各アイテムの一連のアクションを切り替えるために、コンテナーに toggleProperty があります。問題は、1 つのアイテムのトグル ボタンをクリックすると、クリックされたアイテムではなく、すべてのアイテムがトグルされることです。

リストのすべてではなく、クリックした項目のみを切り替える方法を知りたいです。

ember-cli を使用してアプリケーションをビルドしています。

私のカテゴリモデル:

import DS from 'ember-data';

export default DS.Model.extend({
  pk: DS.attr('string'),
  category: DS.attr('string'),
  products: DS.hasMany('product'),
});

私のカテゴリールート：

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.findAll('category');
  },
});

私のカテゴリーコントローラー

expand: function() {
  this.toggleProperty('isExpanded', true);
}

私のテンプレート:

{{#each model as |i|}}
      <tr>
        <td>
          <a {{action 'expand'}}>{{i.category}}</a>
        </td>
        <td>
          {{i.pk}}
        </td>
        <td>
          {{#if isExpanded}}
            <button {{action "deleteCategory"}}>Edit</button>
            <button {{action "deleteCategory"}}>Delete</button>
          {{else}}
            <button {{action 'expand'}}>Actions</button>
          {{/if}}
        </td>
      </tr>
    {{/each}}

stackoverflow では、テキストを追加せずに投稿できないため、各カテゴリをクリックして、同じルート (同じページ) でカテゴリに関連付けられているすべての製品を表示する方法も知りたいですか?

乾杯とありがとう。

4

1 に答える 1

3

コントローラーで:

expand(item) {
  if (!item) {
    return;
  }
  item.toggleProperty('isExpanded', true);
}

テンプレート：

{{#each model as |i|}}
      <tr>
        <td>
          <a {{action 'expand' i}}>{{i.category}}</a>
        </td>
        <td>
          {{i.pk}}
        </td>
        <td>
          {{#if i.isExpanded}}
            <button {{action "deleteCategory"}}>Edit</button>
            <button {{action "deleteCategory"}}>Delete</button>
            Products:
            {{#each i.products as |product|}}
              {{product}}
            {{/each}}
          {{else}}
            <button {{action 'expand' i}}>Actions</button>
          {{/if}}
        </td>
      </tr>
    {{/each}}
于 2015-09-26T08:23:15.973 に答える