Question

我正在尝试在ember中创建一个注册页面，当有人点击注册按钮时，该页面会打开。注册页面以模态打开。我使用了在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');
}
}
});

。我试图在表单提交时触发名为register的动作助手，但不会触发注册动作。从模态实现中我看到动作冒泡已被禁用，因此不会在任何父路由中触发操作。但是为什么它不会在ModalDialogComponent动作标签中触发。

Answer 1

在 ~~ModalController~~ 路线中，添加

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

然后在提交按钮

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

如果你的 ~~ModalController~~ 路由正确绑定，这应该可以。

从Ember的模态提交表格

1 个答案: