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">×</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) имеет чрезвычайно похожую проблему, но не могу найти там никакого решения относительно того, что мне следует делать.
Заранее спасибо.