CODEWITHSUNDEEP
aurelia
Don Fitz
Don Fitz

Reputation: 1174

Aurelia Dialog and Handling Button Events

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

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?
  }
}

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?

Upvotes: 2

Views: 2197

Answers (1)

egeland
egeland

Reputation: 1304

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>

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

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>

And in my code:

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

Not too complex. Hope that helps.

Upvotes: 3

Related Questions