События Aurelia Dialog и Handling Button

Question

Я установил плагин aurelia-dialog. Он работает с использованием примера в readme для GitHub, но документация ничего не объясняет о том, как использовать его иначе. У меня есть простой случай использования со страницей списка. Я хочу нажать кнопку "Добавить новый", открыть модальное диалоговое окно, которое имеет свою собственную виртуальную машину. Модал содержит простой выпадающий список. Мне нужно выбрать элемент в списке и выполнить вызов API для сохранения данных, но я не могу понять, как подключить мой метод сохранения с помощью кнопки сохранения в диалоговом окне.

Метод, который открывает диалоговое окно на странице моего списка (который работает просто отлично):

loadAgencyDialog(id){
    this.dialogService.open({ viewModel: AddAgency, model: { id: id }}).then((result) => {
      if (!result.wasCancelled) {
        console.log('good');
        console.log(result.output);
      } else {
        console.log('bad');
      }
    });

Мой модальный add-agency.js (VM для модальных, также отлично загружает список выбора и да, у меня есть переменная с именем kase, потому что регистр зарезервирован):

import {DialogController} from 'aurelia-dialog';
import {ApiClient} from 'lib/api-client';
import {inject} from 'aurelia-framework';

@inject(DialogController, apiClient)
export class AddAgency {
  kase = { id: '' };
  constructor(controller, apiClient){
    this.controller = controller;
    this.agencies = [];
    this.apiClient = apiClient;
  }

  activate(kase){
    this.kase = kase;
    this.apiClient.get('agencies')
      .then(response => response.json())
      .then(agencies => this.agencies = agencies.data)
      .then(() => console.log(this.agencies)); //these load fine
  }

  addAgency() {
      //Do API call to save the agency here, but how?
  }
}

Это часть, в которой я не уверен. В этом примере они используют controller.ok(theobjectpassedin), который возвращает обещание. Но я не понимаю, где я могу вызвать свой метод addAgency. Есть идеи?

Answer 1

Возможно, я неправильно понимаю ваш вопрос, но вы должны просто позвонить addAgency() в вашем HTML:

<button click.trigger="addAgency()">Add</button>

А потом делай то, что тебе нужно сделать в addAgency(), заканчивая звонком this.controller.ok() завернуть модал.

В качестве примера, вот мой модальный dialog-footer:

<ai-dialog-footer>
  <button click.trigger="controller.cancel()">Cancel</button>
  <button click.trigger="ok(item)">Save</button>
</ai-dialog-footer>

И в моем коде:

ok(item) {
    this.controller.ok(item);
}

Не слишком сложно. Надеюсь, это поможет.