2

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

//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>

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

4

1 回答 1

5

我的回答包括两个解决方案。第一个是正确使用视图的方法。第二种解决方案使用 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");
    }
  }
});

它的用法略有不同，但现在该操作是自包含的，不需要包含在RouteorController中，这可能是您正在寻找的更多内容。

要使用它，您可以执行以下操作：

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

您的模型数据现在可以通过data.firstName和在组件中访问data.lastName，因此模板也稍作修改。您可以在我包含的 JSBin 演示的 HTML 部分中看到这一点。

我希望这有帮助。

于 2014-01-06T09:40:28.643 回答