EmberJS - 将项目重构为组件停止查询参数和操作触发

Question

我目前在我的应用程序中有一个小型报表生成器，用于更新 URL 中的查询参数。查询参数用于在我的后端定义查询条件和 return 所需的报告。

我正在尝试将它重构为一个组件，以便它可以在应用程序的其他部分使用。

这是报表生成器：

<div class="container" style="margin-top:100px">

  <div class="panel panel-info">
    <div class="panel-heading">
      <h3 class="panel-title">Report Builder</h3>
    </div>
    <div class="panel-body">
      <form class="form-horizontal" method="get" {{action "submitQuery" dateFrom dateTo unitNumber on="submit"}}>
        <div class="form-group">

          <div class="col-sm-3"><label>Module:</label>
            {{#select-box/native value=sb on-select=(action 'selected') class="form-control" as |sb| }}
              {{sb.option value='Select a Module:'}} {{sb.option value='Option 1 List'}} {{sb.option value="Option 2 List" }} {{sb.option value="Option 3 List" }} {{sb.option value="Option 4 List" }}
            {{/select-box/native}}
          </div>

          <div class="col-sm-3"><label>Date From:</label>{{pikaday-input locale=en value=dateFrom  format='DD/MM/YYYY' class="form-control" name="dateFrom" onSelection=(action 'onChangeDateFrom') }}</div>
          <div class="col-sm-3"><label>Date From:</label>{{pikaday-input value=dateTo  format='DD/MM/YYYY' class="form-control" name="dateTo" onSelection=(action 'onChangeDateTo') }}</div>
          <div class="col-sm-3"><label>Unit Number:</label>{{input type="text" value=unitNumber class="form-control" name="unitNumber" }}</div>
          <div class="col-lg-10 col-lg-offset-5" style="margin-top:15px">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-info">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

下面是用于设置查询的查询参数并随后将用户带到正确页面的操作。此代码位于 reports.hbs 模板的控制器上：

import Controller from '@ember/controller';

export default Controller.extend({

  queryParams: ['dateFrom', 'dateTo', 'unitNumber'],
  dateFrom: null,
  dateTo: null,
  unitNumber: null,

  actions: {
    selected(x) {
      module = x
    },

    onChangeDateFrom(selectedValue) {
      this.set('dateFrom', moment(selectedValue).format('DD-MM-YYYY'))

    },

    onChangeDateTo(selectedValue) {
      this.set('dateTo', moment(selectedValue).format('DD-MM-YYYY'))

    },

    submitQuery(dateFrom, dateTo, unitNumber) {
      switch (module) {
        case 'Option 1 List':
          this.transitionToRoute('option1list', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber')
            }
          })
          break;
        case 'Option 2 List':
          this.transitionToRoute('opton2list', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber')
            }
          })
          break;
        case 'Option 3 List':
          this.transitionToRoute('option3list', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber')
            }
          })
          break;
        case 'Option 4 List':
          this.transitionToRoute('opton4list', {
            queryParams: {
              dateFrom: this.get('dateFrom'),
              dateTo: this.get('dateTo'),
              unitNumber: this.get('unitNumber')
            }
          })
          break;
        case 'Select a Module:':
          alert('Please select a Module')
          break;
        default:
          console.log('error')
      }
    }
  }
});

当我创建一个组件（报表生成器）并放入 HTML 时，字段和操作不再运行。尝试将操作复制到报告中 -builder.js 也不起作用

transitionToRoute 也不能在组件中使用。我试图将动作分离到组件的 JS 文件中，并将转换分离到一个名为 report-builder 的控制器中，但这没有产生任何结果。

我是 Ember 和软件开发的新手，非常感谢任何建议。

Answer 1

您需要将所有操作从控制器传递到组件。

在reports.js控制器文件中，

actions:{
  submitQuery(){
    //subit query code
  }
}

在reports.hbs文件中，

{{report-builder submitQuery=(action 'submitQuery') }}

在报告-builder.hbs文件中，

<button type="submit" class="btn btn-info" {{action submitQuery}}>Submit</button>

单击提交按钮将触发控制器中的方法 submitQuery。

您可以阅读更多信息triggering-changes-with-actions

EmberJS - 将项目重构为组件停止查询参数和操作触发

EmberJS - Refactoring item into a Component stops Query Params and actions triggering

javascript

ember.js