Ember의 모달에서 양식 제출

Question

누군가가 등록 버튼을 클릭 할 때 열리는 등록 페이지를 작성하려고합니다. 등록 페이지는 모달로 열립니다. Ember websit에 제공된 모달 구현을 사용했습니다. http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/ 버튼을 클릭하면 등록 양식이 열리지 만 등록 양식 제출 장소는 어디에도 없습니다. 당신은 여기에 코드를 참조 할 수 있습니다 : http://jsfiddle.net/jywPL/1/

<script type="text/x-handlebars"> 
{{outlet}} 
{{outlet modal}} 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
<h4>Register</h5> 
{{outlet}} 
<button {{action 'openModal' 'modal' model}}>Register</button> 
</script> 

<script type="text/x-handlebars" data-template-name="modal"> 
{{#modal-dialog action="close"}} 
<form class="form-horizontal" {{action "register" on="submit"}}> 
<br/> 
<div align="center" > 
<table class="table-hover"> 
<tr> 
    <td> 
    <label>First Name</label> 
    </td> 

    <td> 
    {{input value=firstName class="controls" type="text"}} 
    </td> 
</tr> 

<tr> 
    <td> 
    <label>Last Name</label> 
    </td> 

    <td> 
    {{input value=lastName class="controls" type="text"}} 
    </td> 
</tr> 

<tr> 
    <td> 
    <label>Email</label> 
    </td> 

    <td> 
    {{input value=email class="controls" type="text"}} 
    </td> 
</tr> 

<tr> 
    <td> 
    <label>Company</label> 
    </td> 

    <td> 
    {{input value=company class="controls" type="text"}} 
    </td> 
</tr> 

<tr> 
    <td> 
    <label>Company Contact</label> 
    </td> 

    <td> 
    {{input value=contact class="controls" type="text"}} 
    </td> 
</tr> 

<tr> 
    <td> 
    <label>Reason for request</label> 
    </td> 

    <td> 
    {{view Ember.TextArea valueBinding="reason" rows="10" cols="20"}} 
    </td> 
</tr> 
</table> 
<br/> 
<button type="submit">Register</button> 
<button {{action "close"}}>Done</button> 
</div> 
</form> 

{{/modal-dialog}} 
</script> 

<script type="text/x-handlebars" id="components/modal-dialog"> 
<div class="overlay" {{action "close"}}> 
    <div class="modal" {{action bubbles=false}}> 
    {{yield}} 
    </div> 
</div> 
</script> 

var App = Ember.Application.create(); 

App.ApplicationRoute = Ember.Route.extend({ 
actions: { 
openModal: function(modalName, model) { 
    this.controllerFor(modalName).set('model', model); 
    return this.render(modalName, { 
    into: 'application', 
    outlet: 'modal' 
    }); 
}, 

closeModal: function() { 
    return this.disconnectOutlet({ 
    outlet: 'modal', 
    parentView: 'application' 
    }); 
}, 
register: function() { 
    alert('hello'); 
} 
} 
}); 

App.IndexRoute = Ember.Route.extend({ 
model: function() { 
return Em.Object.create({firstName: '',lastName: '',email:'',company:'',contact:'',reason:''}); 
}, 
action: { 
register: function(){ 
    alert('Registering'); 
} 
} 
}); 

App.ModalController = Ember.ObjectController.extend({ 
actions: { 
close: function() { 
    return this.send('closeModal'); 
}, 
register: function(){ 
alert('hello1'); 
} 
} 
}); 

App.ModalDialogComponent = Ember.Component.extend({ 
actions: { 
close: function() { 
    return this.sendAction(); 
}, 
register: function(){ 
alert('hello2'); 
} 
} 
}); 

.I 양식에 대한 조치 도우미라는 레지스터를 트리거하기 위해 노력했다 제출하지만 레지스터 액션이 트리거되지 않습니다. 모달 구현에서 액션 버블 링이 비활성화되어 상위 루트 중 하나에서 액션이 트리거되지 않는다는 것을 알 수 있습니다. 하지만 ModalDialogComponent 액션 태그에서 트리거되지 않는 이유는 무엇입니까? 당신의 ModalController 경로에서

Answer 1

, 당신의 ModalController 경로가 제대로 결합되면

이

<button type="submit" {{action "doRegister"}}>Register</button> 

,이 일을해야 제출 버튼에 다음

action: { 
    doRegister: function() { 
     this.register(); //or whatever 
    } 

를 추가합니다.