Aurelia Dialog не возвращает ответ после использования выпадающего списка

Я использую плагин aurelia-dialog, чтобы позволить пользователям создавать набор объектов, и хочу, чтобы ответ диалога возвращал выбранные объекты.

Рабочий процесс заключается в том, что список опций генерируется из вызова API с использованием обещания, когда в диалоговом окне вызывается метод activ (). Затем параметры отображаются для пользователя и выбираются из раскрывающегося списка. Затем пользователь нажимает кнопку ОК, и ответ должен быть отправлен обратно. Вот код, который должен выполнить это:

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>

До тех пор, пока я не коснусь раскрывающегося списка, диалоговое окно будет возвращать нулевое значение (или любое другое значение, к которому я инициализирую returnSet). Однако, как только я нажимаю на выпадающий список, нажатие кнопки "Сохранить" или "Отмена" приводит к тому, что ничего не возвращается, и строки console.log в конце моего первого блока кода просто пропускаются. Я также попытался удалить строку click.delegate из моего HTML, но это ничего не изменило.

У кого-нибудь есть идеи, почему это может происходить? Кроме того, я обнаружил, что этот пост ( Aurelia Dialog и Handling Button Events) имеет чрезвычайно похожую проблему, но не могу найти там никакого решения относительно того, что мне следует делать.

Заранее спасибо.

0 ответов

Другие вопросы по тегам