2015-12-22 66 views
2

我已經設置了aurelia-dialog插件。它正在使用GitHub自述文件中的示例,但文檔沒有解釋如何使用它的任何其他內容。我有一個簡單的用例與列表頁面。我想單擊一個「添加新的」按鈕,彈出具有自己虛擬機的模式對話框。該模式包含一個簡單的下拉列表。我需要在列表中選擇一個項目並進行API調用以保存數據,但我似乎無法弄清楚如何使用對話框上的保存按鈕來連接我的保存方法。Aurelia對話框和處理按鈕事件

打開我的列表頁面上的對話框(工作只是罰款)的方法:

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的模式,同時也被裝入選擇列表就好了,是的,我有一個名爲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方法的地方。有任何想法嗎?

回答

3

有可能我誤解你的問題,但你應該能夠只是調用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); 
} 

不要太複雜。希望有所幫助。

+0

這正是我的想法,但我有一個對象,我加載在模態中的激活調用。它獲得一個對象(代理)列表並將它們分配給一個局部變量(this.agencies)。如果我在按鈕上調用addAgency()方法,那麼我的this.agecies始終爲空。就像在調用激活方法之後,我的代理對象被抽出。 –

+0

這肯定有幫助,並證實我是在正確的道路上。現在我只需要找出爲什麼我的this.agencies在調用activate之後總是爲空。但是,你確實回答了原來的問題。謝謝。 –

+0

你是否需要在'activate()'中'返回'你的承諾,就像'return this.apiClient.get('agencies').then()....''? – egeland