Question

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

工作流是在对话框上调用activate（）方法时使用promise从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（或我将initialSet初始化为的任何其他值）。但是，只要单击下拉列表，单击“保存”或“取消”按钮就不会返回任何内容，并且会跳过第一个代码块末尾的console.log行。我也尝试从HTML中删除click.delegate行，但这并没有改变任何内容。

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

提前致谢。

Aurelia Dialog在使用下拉菜单后没有返回响应

0 个答案: