在视图中表单提交事件

Question

我在View中有一个表单。我如何以及在何处处理表单提交事件？另外，我在哪里可以编写处理此表单中元素的事件的代码。我尝试在以下处理它：

//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组件，我认为它更接近您的目标。

---

灰烬视图方法：

我创建了working demo here，供您查看。

您需要做的一些事情：

您的模板代码：

您需要注意创建干净有效的代码。您尚未关闭<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上处理视图的操作。 See here有关如何对视图使用操作的示例。

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

{{view App.SignUpForm}}

---

Ember组件方法：

如果要将操作保留在视图中，则需要使用组件。 See this demo，用作组件。

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部分中看到这一点。

我希望这会有所帮助。