1
我正在嘗試在某人點擊註冊按鈕時打開的一個註冊頁面。註冊頁面以模式打開。我使用Ember websit http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/ 上給出的模式實現現在註冊表單打開時點擊按鈕,但我無法在任何地方捕獲註冊表單的提交事件。您可以參考這裏的代碼: http://jsfiddle.net/jywPL/1/從Ember中的模式提交表單
<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操作標記中觸發。
這不起作用。你可以嘗試在呃網站上給出的例子。 http://emberjs.jsbin.com/iluLOto/1/edit。嘗試向完成按鈕旁邊的模板模板添加按鈕,並在該按鈕的操作處理程序中放置警報。它不會工作。 –
你的意思是不工作? http://emberjs.jsbin.com/udUsEPuY/1/edit?html,css,js輸出 – Yman
我的意思是,它沒有在模態控制器中工作,正如你在答案中提到的那樣。不知道這個行爲應該在ApplicationRoute中定義。感謝您的幫助。 –