javascript - 如何将测验的所有选项设置为事件 : false on click?

Question

我正在尝试构建一个具有多项选择选项的问题(最终是一个测验)。当用户单击某个选项时，事件类将设置为 true，并为该选项插入红色背景。我想要帮助的是，如果用户决定单击另一个选项。之前的事件选项应更改为 active: false，新选项应更改为 active: true。这是我的第一个 Ember.js 应用程序，因此如果有更好的方法来做到这一点，我会洗耳恭听。

 var IndexRoute = Ember.Route.extend({
   model: function() {
     return Ember.A([
      {
        question: "What's up?",
        options: [
          {
            text: "option a",
            active: false
          },
          {
            text: "option b",
            active: false
          }
        ]
      },
      {
        question: "How many?",
        options: [
          "one",
          "two"
        ]
      }
     ]);
   }
 });

索引.hbs

{{#each model}}
  {{quiz-question section=this}}
{{/each}}

测验问题.hbs

{{#with section}}
  {{question}}
  {{#each options}}
    {{quiz-option active=active text=text}}
  {{/each}}
{{/with}}

{{yield}}

测验选项.hbs

<div {{bind-attr class="active"}}>{{text}}</div>

{{yield}}

测验选项.js

export default Ember.Component.extend({
  click: function () {
    console.log('asdf', this.get('text'));
    this.set('active', true);
  }
});

应用程序.css

html, body {
  margin: 20px;
}

.active {
  background-color: red;
}

Answer 1

您可以使用 sendAction 将操作传递到父级别，在父级别中它可以迭代集合并将所有其他项设置为 false。

App.QuizOptionComponent = Ember.Component.extend({
  click: function () {
    this.set('active', true);
    this.sendAction('killFriendsExcept', this.get('text'));
  }
});

{quiz-option active=active text=text  killFriendsExcept='resetChildrenExcept'}}


App.QuizQuestionComponent = Ember.Component.extend({
  actions: {
    resetChildrenExcept: function(except){
      this.get('section.options').forEach(function(item){
        if(Em.get(item, 'text')!=except){
          Em.set(item, 'active', false);
        }
      });
    }
  }
});

http://emberjs.jsbin.com/jitezago/1/edit