Question

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

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

以下是报告构建器：

<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时，字段和操作不再运行。尝试将操作复制到report-builder.js中也无法正常工作

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

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

Answer 1

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

在reports.js控制器文件中，

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

在reports.hbs文件中，

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

在report-builder.hbs文件中，

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

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

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

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

1 个答案: