2016-10-21 2 views
1

안녕하세요, 기본 대화 상자를 실행할 수는 있지만 대화 상자를 그대로 유지하고 직접 닫으려고합니다. 그게 가능하니?aurelia-dialog가 닫히지 않게하십시오.

현재 [확인] 단추를 클릭하면 즉시 대화 상자가 제거됩니다.

기본적으로 사용자 이름/비밀번호가있는 로그인 상자로 대화 상자를 만들고 싶습니다. 실패한 로그인 시도에서 대화 상자에 오류 메시지를 표시하고 닫지 않습니다.

내 템플릿은

<template> 
    <ai-dialog> 
    <ai-dialog-header> 
    </ai-dialog-header> 
    <ai-dialog-body> 
     <h2>Username:</h2> 
     <input value.bind="auth.username" attach-focus="true" /> 
     <br /> 
     <h2>Password:</h2> 
     <input value.bind="auth.password" attach-focus="false" /> 
     <br /><br /> 
     <span innerhtml.bind="auth.error">No Error</span> 
    </ai-dialog-body> 
    <ai-dialog-footer> 
     <button click.trigger="controller.ok(auth)">Ok</button> 
    </ai-dialog-footer> 
    </ai-dialog> 
</template> 

내가

let auth = { username: 'Wade', password: 'Watts', error : ""}; 

    this.dialogService.openAndYieldController({viewModel: Login, model: auth}).then(controller => { 
    // Note you get here when the dialog is opened, and you are able to close dialog 
    // Promise for the result is stored in controller.result property 

    controller.result.then((response) => { 

     if (!response.wasCancelled) { 
     console.log('good'); 
     } else { 
     console.log('bad'); 
     } 

     console.log(response); 

    }) 

    }); 

감사

+0

'openAndYieldController()'(https://github.com/aurelia/dialog#getting-access-to-dialogcontroller-api-outside)를 사용하십시오. – valichek

+0

openAndYieldController를 사용하여 시도했음을 언급해야합니다. 나는 그 질문을 편집했다. –

+0

대화 상자에서 어떤보기를로드하고 있습니까? 대화 상자 내부의 viewmodel을 통해이를 제어 할 수 있어야합니다. –

답변

1

네, 가능처럼 다른 모듈에서 호출 오전

import {DialogController} from 'aurelia-dialog'; 

export class Login { 
    static inject = [DialogController]; 
    auth = { username: '', password: '', error: '' }; 

    constructor(private controller : DialogController){ 

    this.controller = controller; 
    } 

    activate(auth){ 
    this.auth = auth; 
    } 
} 

모델입니다 - 아주 바보 르, 사실. 여기서 해결 방법은 대화 상자를 닫을 때까지 또는 적용하지 않을 때 controller.ok() 또는 controller.cancel()을 사용하지 않는 것입니다. 당신이 당신의 버튼에서 controller.ok()를 호출하는 이유 귀하의 경우에는

, 나는 완전히 확실하지 않다,하지만 당신은 같은 것을 할 수있는 :

<ai-dialog-footer> 
    <button click.trigger="tryLogin(auth)">Ok</button> 
</ai-dialog-footer> 

을 ... 당신의 ViewModel의 :

import {DialogController} from 'aurelia-dialog'; 

export class Login { 
    static inject = [DialogController]; 
    auth = { username: '', password: '', error: '' }; 

    constructor(private controller : DialogController){ 

    this.controller = controller; 
    } 

    activate(auth){ 
    this.auth = auth; 
    } 

    tryLogin (auth) { 
    myLoginService.login(auth) 
     .then((success) => { 
     if (success) this.controller.ok(auth); 
     }); 
    } 
} 

나는 그것이 의미가 있기를 바랍니다. 기본적으로 모달의 뷰는 다른 Aurelia 뷰와 뷰 모델 쌍이며 응용 프로그램의 다른 뷰와 다를 바 없습니다. controller.ok().cancel() 메서드는 대화 상자를 닫고 호출자에게 제어를 반환하도록 설계되었습니다. 그러나 대화 상자 안에 있으면 응용 프로그램의 다른 곳에서 할 수있는 모든 작업을 수행 할 수 있습니다.

+0

좋습니다! 그것을 본 후에 그것은 완벽하게 이해됩니다. 감사 –

관련 문제