[英]How do I handle form submission in ember.js?
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.
当按下提交按钮时,ajax请求被发送到服务器,该服务器回答了我想要正确显示的一些json数据。 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 proper way to do this in Ember.js?
我可以想一些方法来组合视图和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? 2)如果我要创建一个表示提交的表单状态的路由,如何将参数序列化为对Ember有意义的路径? Is that even possible?
这甚至可能吗?
Since no one answered yet, i have created a fiddle showing how i would to this. 由于还没有人回答,我创造了一个小提琴,展示了我对此的看法 。
This is the basic approach: 这是基本方法:
So the approach is fundamentally different from the traditional way of handling forms this way: 因此,这种方法与以这种方式处理表单的传统方式根本不同:
The example shows a form (just conceptually, as there is no HTML form element) to enter a first and last name. 该示例显示了一个表单(只是在概念上,因为没有HTML表单元素)来输入名字和姓氏。 The entered values are synced to the model and you can can "perform a submit".
输入的值将同步到模型,您可以“执行提交”。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.