Question

我已经设置了aurelia-dialog插件。它正在使用GitHub自述文件中的示例，但文档并没有解释有关如何使用它的任何内容。我有一个简单的用例和列表页面。我想点击＆＃34;添加新的＆＃34;按钮，弹出具有它自己的VM的模态对话框。模态包含一个简单的下拉列表。我需要在列表中选择一个项目并进行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');
      }
    });

我的modal add-agency.js（模态的VM，也加载了选择列表就好了，是的，我有一个名为kase的变量因为保留了case）：

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），它返回一个promise。 但是我无法调用我的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对话和处理按钮事件

1 个答案: