Aurelia对话框和处理按钮事件 [英] Aurelia Dialog and Handling Button Events

问题描述

我已经设置了aurelia-dialog插件.它正在使用GitHub自述文件中的示例进行工作，但是文档并未解释任何有关如何使用它的内容.我有一个带有列表页面的简单用例.我想单击添加新"按钮，弹出具有其自己的VM的模式对话框.模态包含一个简单的下拉列表.我需要在列表中选择一个项目并进行API调用以保存数据，但似乎无法弄清楚如何使用对话框上的保存"按钮连接保存方法.

I have set up the aurelia-dialog plugin. It's working using the example in the GitHub readme, but the documentation doesn't explain anything about how to use it otherwise. I have a simple use case with a list page. I want to click an "add new" button, pop the modal dialog which has it's own VM. The modal contains a simple dropdown list. I need to select an item on the list and make an API call to save the data, but I can't seem to figure out how to wire up my save method with the save button on the dialog.

在我的列表页面上打开对话框的方法(效果很好):

The method that opens the dialog on my list page (which works just fine):

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的变量，因为保留了大小写):

My modal add-agency.js (VM for the modal, also loads the select list just fine and yes, I have a variable named kase because case is reserved):

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方法.有什么想法吗?

This is part I'm unsure about. In the example, they use controller.ok(theobjectpassedin), which returns a promise. But I don't get where I can call my addAgency method. Any ideas?

推荐答案

可能是我误解了您的问题，但是您应该能够在HTML中调用addAgency():

It's possible I'm misunderstanding your question, but you should be able to just call addAgency() in your HTML:

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

然后执行addAgency()中需要做的事情，最后调用this.controller.ok()来包装模态.

And then do what you need to do in addAgency(), finishing with a call to this.controller.ok() to wrap up the modal.

作为一个例子，这是我的模态的dialog-footer:

As an example, here's my modal's 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);
}

不太复杂.希望有帮助.

Not too complex. Hope that helps.

这篇关于Aurelia对话框和处理按钮事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！