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

如果您正在处理余烬数据，您可以简单地将复选框绑定到每个容器的值＆＃34;数据＆＃34;或＆＃34;语音＆＃34;复选框（例如{{input type =＆＃39;复选框＆＃39; 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>

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

1 个答案: