Aurelia 对话框和处理按钮事件

Question

我已经设置了 aurelia-dialog 插件。它使用 GitHub 自述文件中的示例工作，但文档没有解释任何关于如何使用它的信息。我有一个带有列表页面的简单用例。我想单击 "add new" 按钮，弹出具有自己的 VM 的模式对话框。模式包含一个简单的下拉列表。我需要 select 列表中的一个项目并调用 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');
      }
    });

我的模态添加-agency.js（模态的 VM，也加载 select 列表就好了，是的，我有一个名为 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)，其中 returns 是一个承诺。 但是我不知道在哪里可以调用我的 addAgency 方法。有什么想法吗？

Answer 1

我可能误解了你的问题，但你应该可以在 HTML:

中调用 addAgency()

<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);
}

不太复杂。希望对您有所帮助。

Aurelia 对话框和处理按钮事件

Aurelia Dialog and Handling Button Events

aurelia