0

我正在使用 aurelia-dialog 插件来允许用户生成一组对象，并希望对话框的响应返回所选对象。

工作流程是，当在对话框上调用 activate() 方法时，使用承诺从 API 调用生成选项列表。然后将选项显示给用户，并从下拉列表中进行选择。然后用户单击确定，响应应该被发回。这是应该完成它的代码：

this.ds.open({
  viewModel: MyModal,
  model: {
    "title": "Select Objects",
    "message": "I hate this modal"
  }
}).then(response => {
  console.log("closed modal");
  console.log(response);

  if (!response.wasCancelled) {
    console.log('OK');
  } else {
    console.log('cancelled');
  }
  console.log(response.output);
});

然后在 modal.js 中：

import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';
import {ModalAPI} from './../apis/modal-api';

//@inject(ModalAPI, DialogController)
export class MyModal {
  static inject = [DialogController, ModalAPI];

  constructor(controller, api){
    this.controller = controller;
    this.api = api;

    controller.settings.centerHorizontalOnly = true;
  }

  activate(args){
    this.title = args.title;
    this.message = args.message;
    this.returnedSet = null;
    this.historicSetName = null;
    this.reportHist = null;


    return this.api.getReportHistory().then(reports => {
      this.reportHist = reports;
    });
  }

  selectHistoricReport() {
    console.log(this.historicSetName);
    if(this.historicSetName == "Select a report...") {
        this.returnedSet = null;
    } else {
        var selectedReport = this.reportHist.filter(x => x.name == this.historicSetName)[0];
        this.returnedSet = selectedReport.rsids;
    }
    console.log(this.returnedSet);
  }

  ok(returnedSet) {
    console.log(returnedSet);
    this.controller.ok(returnedSet);
  }
}

然后是html：

<template>
  <require from="../css/upload-set.css"></require>
  <ai-dialog class="selector panel panel-primary">
    <ai-dialog-header class="panel-heading">
    <button type="button" class="close" click.trigger="controller.cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">${title}</h4>
    </ai-dialog-header>
        <ai-dialog-body class="panel-body container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <label>Report: </label>
          <select value.bind="historicSetName" change.delegate="selectHistoricReport()" class="input-md form-control">
            <option ref="historicSetPlaceholder">Select a report...</option>
            <option repeat.for="historicReport of reportHist">${historicReport.name}</option>
          </select>
        </div>
      </div>
        </ai-dialog-body>
        <ai-dialog-footer>
            <button click.trigger="controller.cancel()">Cancel</button>
            <button click.trigger="ok(returnedSet)">Save</button>
        </ai-dialog-footer>
    </ai-dialog>
</template>

只要我不触摸下拉菜单，对话框就会返回 null（或我初始化返回集的任何其他值）。但是，一旦我单击下拉菜单，单击 Save 或 Cancel 按钮不会返回任何内容，并且我的第一个代码块末尾的 console.log 行只会被跳过。我还尝试从我的 HTML 中删除 click.delegate 行，但这并没有改变任何东西。

任何人都知道为什么会发生这种情况？另外，我发现这篇文章（Aurelia Dialog and Handling Button Events）有一个非常相似的问题，但似乎找不到任何关于我应该做什么的解决方案。

提前致谢。

4

0 回答 0