javascript - 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);
    }
  }
});

这也是 Controller 中的最后一个操作，以防有人发现它有用

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

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

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

谢谢大家。

Answer 1

如果您正在处理 ember-data，您可以简单地将复选框绑定(bind)到每个船只“数据”或“语音”复选框的值(例如 {{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>