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

。我曾試圖觸發形式動作助手稱爲寄存器提交，但不會觸發寄存器動作。從模式實現中我看到動作冒泡已被禁用，因此動作不會在任何父路由中觸發。但爲什麼它不會在ModalDialogComponent操作標記中觸發。

Answer 1

在你 ModalController 路線，添加

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

然後提交按鈕

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

如果您 ModalController 路線正確結合，這應該工作。