在视图中表单提交事件

Question

我在视图中有一个窗体。如何以及在哪里可以处理表单提交事件？此外，我在哪里可以编写处理此表单中存在的元素上的事件的代码

//Instantiating a view with a template name signup
var signup = Ember.View.create({
templateName: "signup",
name: 'Sign Up',
click: function()
{
alert('click triggered from signup template');
},
submit: function()
{
alert('submit triggered');
},
signup: function()
{
alert('signup triggered');
}
});
<script type="text/x-handlebars" data-template-name="signup">
<form class="form-horizontal"  {{action "signup" 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>
<button class="btn  btn-primary " type="submit" >Register</button>
</div>
</form>
</script>

当我点击按钮上的任何位置时，只会触发点击事件。如何访问提交事件？

Answer 1

我的答案包括两个解决方案。第一个是正确使用视图的方法。第二个解决方案使用Ember组件，我认为这更接近于你想要做的

---

Ember视图方法：

我在这里创建了一个工作演示，供您查看。

以下是您需要做的几件事：

您的模板代码：

您需要小心创建干净有效的代码。您没有关闭<table>标记上的类名，也没有包含关闭的</table>标记。这是已清理的模板：

<form class="form-horizontal" {{action "signup" 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>
</table>
<button class="btn btn-primary" type="submit">Register</button>
</div>
</form>

使用您的视图：

不能向这样的视图添加操作。视图的操作必须在Route或Controller上处理。有关如何在视图中使用操作的示例，请参见此处。

从本质上讲，您的操作处理程序将尝试将操作传递给包含视图的控制器或路由。请注意，在我的演示中，IndexRoute具有模型和要采取的操作，并且索引模板引用了视图：

{{view App.SignUpForm}}

---

Ember组件方法：

如果要将操作保留在视图中，则需要使用组件。请参阅此演示，用作组件。

App.SignUpFormComponent = Ember.Component.extend({
templateName: "signup",
actions: {
signup: function(){
alert("SignUp Clicked");
}
}
});

它的用法略有不同，但现在该操作是自包含的，不需要包含在Route或Controller中，这可能更符合您的要求。

要使用它，你可以做：

{{sign-up-form data=this}}

您的模型数据现在可以通过执行data.firstName和data.lastName在组件中访问，因此模板也进行了轻微修改。您可以在我附带的JSBin演示的HTML部分看到这一点。

我希望这能有所帮助。