jQuery 我如何处理 ember.js 中的表单提交？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18309544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I handle form submission in ember.js?
提问by kliron
I have a form with various controls. When the submit button is pushed an ajax request is sent to the server which answers with some json data I want to display properly. This is a one-off thing, no bindings, etc needed, the data is read-once and discarded afterwards. I can think of some ways to do this combining views and jquery but what is the properway to do this in Ember.js?
我有一个带有各种控件的表单。当提交按钮被按下时，一个 ajax 请求被发送到服务器，它用一些我想要正确显示的 json 数据来回答。这是一次性的，不需要绑定等，数据被读取一次然后丢弃。我可以想出一些方法来结合视图和 jquery，但是在 Ember.js 中这样做的正确方法是什么？
More specifically:
进一步来说：
1) How do I communicate the form parameters from the view to the controller that is going to handle the submission event?
1) 如何将表单参数从视图传递到将处理提交事件的控制器？
2) If I were to create a route to represent the submitted form state how do I serialize the parameters into a route path that makes sense for Ember? Is that even possible?
2）如果我要创建一个路由来表示提交的表单状态，我如何将参数序列化为对 Ember 有意义的路由路径？这甚至可能吗？
回答by mavilein
Since no one answered yet, i have created a fiddleshowing how i would to this.
由于还没有人回答，我创建了一个小提琴来展示我将如何做到这一点。
This is the basic approach:
这是基本方法：
- I would setup a controller with a fresh (== empty) model.
- Use bindingsto synchronize the values of form elements to the model of the controller.
- Create a action that takes the updated model and does whatever you want with it (this replaces the traditional form submit).
- 我会设置一个带有新（== 空）模型的控制器。
- 使用绑定将表单元素的值同步到控制器的模型。
- 创建一个操作，该操作采用更新的模型并执行您想要的任何操作（这取代了传统的表单 submit）。
So the approach is fundamentally different from the traditional way of handling forms this way:
所以这种方法与传统的处理表单的方式有着根本的不同：
- There is no HTML form element, since it is not needed.
- The data is not submitted automatically to the server, instead you would send/submit it manually via javascript logic. Imho this is an advantage as you could perform additional logic before or after submitting the data to the server.
- This plays nicely with REST-API approacheslike ember-date or ember-epf :-)
- 有没有HTML表单元素，因为它不需要。
- 数据不会自动提交到服务器，而是您可以 通过 javascript 逻辑手动发送/提交。恕我直言，这是一个优势，因为您可以在将数据提交到服务器之前或之后执行其他逻辑。
- 这与ember-date 或 ember-epf 之类的REST-API 方法很相配:-)
The example shows a form (just conceptually, as there is no HTML form element) to enter a first and last name. The entered values are synced to the model and you can can "perform a submit".
该示例显示了一个用于输入名字和姓氏的表单（只是概念上的，因为没有 HTML 表单元素）。输入的值会同步到模型，您可以“执行提交”。
The JS code:
JS代码：
App = Ember.Application.create({});
App.Person = Ember.Object.extend({
firstName : "",
lastName : ""
});
App.IndexRoute = Ember.Route.extend({
model: function(){
return App.Person.create()
},
setupController : function(controller, model){
controller.set("model", model);
}
});
App.IndexController = Ember.ObjectController.extend({
submitAction : function(){
// here you could perform your actions like persisting to the server or so
alert("now we can submit the model:" + this.get("model"));
}
});
The template showing the use of value bindings:
显示值绑定使用的模板：
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Content:</h2>
{{input valueBinding="model.firstName"}}
{{input valueBinding="model.lastName"}}
<button {{action submitAction target="controller"}}>Pseudo Submit</button>
<p>{{model.firstName}} - {{model.lastName}}</p>
</script>
