Question

我有一个包含我隐藏的子元素的列表。通过单击顶部元素，它会添加一个名为active的类。出于某种原因，当我点击一个include('TCPDF.php'); //In yet another file Class One extends TCPDF { public function Header() { die; } public function Footer() { die; } } //In another file Class Two extends One { public function Header() { die; } public function Footer() { die; } } //in one file Class Three extends Two { public function Header() { die; } public function Footer() { die; } }时，它会添加“有效”字样。等级到所有其他<li>

<li>'s

`

<ul>
  {{#each model as |genre|}}
    <li {{action 'toggleActive'}} class="{{if isActive "active"}}">
        {{genre.title}}
      <ul>
        {{#each genre.subgenre as |subgenre|}}
          <li>{{subgenre.title}}</li>
        {{/each}}
      </ul>
    </li>
  {{/each}}
</ul>

Answer 1

目前isActive是用于所有li元素的单一属性。这就是这种行为的原因。对于您的情况，您需要为每个isActive引入genre属性。

<li {{action 'toggleActive' genre}} class="{{if genre.isActive "active"}}">

并在组件中切换特定实例isActive proeprty并将其设置为genre，

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
    toggleActive(genre){
      Ember.set(genre,'isActive', !Ember.get(genre,'isActive'));      
    }
  }
});

单击对所有元素EmberJS触发的操作

1 个答案: