Ember JS组件多个复选框选择到数组

Question

我有一个 Ember 前端，我想创建一个带有多个复选框的表单，并且以某种方式在选中时填充选中项的集合，或者在提交表单时收集选中的复选框

这就是我调用组件的方式

{{scheduled-report-form item=model buttonLabel=buttonLabel action='saveScheduledReport'}}

这就是模板中发生的事情

                  {{#each item.vessels as |vessel|}}
                    <div>
                      <label class="custom-checkbox form-control-inline">
                        {{input type='checkbox' change=(action 'checkboxChangedVoice' item.scheduledReport vessel checkedVoice) selected=checkedVoice }}
                        <span>Voice</span>
                      </label>
                      <label class="custom-checkbox form-control-inline">
                        {{input type='checkbox' change=(action 'checkboxChangedData' item.scheduledReport vessel checkedData) checked=checkedData}}
                        <span>Data</span>
                      </label>
                      <span>{{vessel.name}}</span>
                    </div>
                  {{/each}}
                  .
                  .
                  .
                  <button type="submit" class="btn btn-main" {{action 'buttonClicked' item.scheduledReport item.user item.vessels }}>Generate report {{buttonLabel}}</button>

每个模型实例的复选框应该是 2，例如

Data Voice 
[]   []    Name1
[]   []    Name2

目前我试图解决的方法似乎不起作用

所以在我的组件中：

import Ember from 'ember';

export default Ember.Component.extend({
  optionsData: [],
  optionsVoice: [],
  srOptions: [],
  checkedVoice:false,
  checkedData:false,

  didInsertElemet() {
    this.selectedItems = [];
  },

  actions: {

    checkboxChangedVoice(options, vessel, paramValue) {
      console.log(paramValue);
      console.log(this.get('checkedVoice'));
      //this populates an array with the checked boxes
      this.get('optionsVoice').push(vessel);
      console.log(this.get('optionsVoice'))
    },
    checkboxChangedData(options, vessel,paramValue) {
      console.log(paramValue);
      console.log(this.get('checkedData'));
      //this populates an array with the checked boxes
      this.get('optionsData').push(vessel);
      console.log(this.get('optionsData'))
    },
    buttonClicked(paramsScheduledReport, paramsUser, srOptions) {
      srOptions = this.get('srOptions')
      this.sendAction('action', paramsScheduledReport, paramsUser, srOptions);
    }
  }
});

这也是控制器中的最后一个动作，以防有人发现它有用

import Ember from 'ember';

export default Ember.Controller.extend({
 actions: {
        saveScheduledReport(newScheduledReport, user , vessel) {
            var controller = this;

   console.log(vessel.toArray())
            newScheduledReport.set('user', user);
   newScheduledReport.set('vessels',vessel);
   newScheduledReport.set('srOptions',vessel);
   //TODO: Add recipients array from form!
   newScheduledReport.set('reportRecipients',[])
            newScheduledReport.save().then(function() {
                controller.transitionToRoute('/');
            });
        },
    }
});

现在当我点击一个复选框时，组件中会发生什么：

console.log(paramValue) 将始终回答 undefined console.log(this.get('checkedVoice') 将始终回答 false

此时您可能会注意到该组件只是将值附加到数组中，我试图实现“切换”功能，但我无法访问已检查的 (true/false) 值。

如果您认为我的实现完全不可行，请建议任何其他可行的解决方案。

谢谢你们。

Answer 1

如果您正在处理 ember-data，您可以简单地将复选框绑定到每个容器“数据”或“语音”复选框的值（例如 {{input type='checkbox' checked=vessel.checkedVoice}}）和准备好后保存模型。

但是对于您在数组中跟踪它的具体要求。创建每个容器的对象数组会更简单。然后在提交表单时，您可以根据 filterBy 提交一组对象。

示例实现：

// scheduled-report-form.js
import Ember from 'ember';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);

    this.set('tempVessels', []);
    this.get('item.vessels').forEach((vessel) => {
      this.get('tempVessels').pushObject(Ember.Object.create({checkboxVoice: false, checkboxData: false, vessel: vessel}));
    });
  },
  actions: {
    buttonClicked() {
      console.log('Voice array:');
      console.log(this.get('tempVessels').filterBy('checkboxVoice', true));
      console.log('Data array:');
      console.log(this.get('tempVessels').filterBy('checkboxData', true));
    }
  }
});

// scheduled-report-form.hbs
{{#each tempVessels as |vessel|}}
  // The sub-component isn't neccessary, just my design preference.
  {{checkboxes-component vessel=vessel}}
{{/each}}
.
.
.
<button type="submit" class="btn btn-main" {{action 'buttonClicked'}}>Generate report {{buttonLabel}}</button>

// checkboxes-component.hbs
<label class="custom-checkbox form-control-inline">
  {{input type='checkbox' checked=vessel.checkboxVoice}}
  <span>Voice</span> = {{vessel.checkboxVoice}}
</label>
<label class="custom-checkbox form-control-inline">
  {{input type='checkbox' checked=vessel.checkboxData}}
  <span>Data</span> = {{vessel.checkboxData}}
</label>
<span>{{vessel.name}}</span>