ember.js - View 中的表单提交事件

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

我的回答包括两个解决方案。第一个是正确使用 View 的方法。第二种解决方案使用 Ember 组件，我认为它更接近您想要做的事情。

---

Ember View 方法:

我创建了一个 working demo here , 给你看看。

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

您的模板代码:

您需要小心创建干净有效的代码。您尚未关闭 <table> 上的类(class)名称标签也没有包含结尾 </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>

使用您的 View :

您不能像那样向 View 添加操作。 View 的操作必须在 Route 上处理或 Controller . See here有关如何对 View 使用操作的示例。

本质上，您的操作处理程序将尝试将操作传递给 Controller ​​或包含您的 View 的路由。注意在我的演示中，IndexRoute具有模型和要采取的操作，并且索引模板引用了 View :

{{view App.SignUpForm}}

---

Ember 组件方法:

如果您想将操作保留在您的 View 中，那么您需要使用一个组件。 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 部分中看到这一点。

希望对您有所帮助。