我有一个带有各种控件的表单。当提交按钮被按下时,一个 ajax 请求被发送到服务器,该服务器用一些我想要正确显示的 json 数据来回答。这是一次性的事情,不需要绑定等,数据被读取一次然后丢弃。我可以想到一些结合视图和 jquery 的方法,但是在 Ember.js 中执行此操作的正确方法是什么?
进一步来说:
1)如何将表单参数从视图传递到将处理提交事件的控制器?
2) 如果我要创建一个路由来表示提交的表单状态,我如何将参数序列化为对 Ember 有意义的路由路径?这甚至可能吗?
我有一个带有各种控件的表单。当提交按钮被按下时,一个 ajax 请求被发送到服务器,该服务器用一些我想要正确显示的 json 数据来回答。这是一次性的事情,不需要绑定等,数据被读取一次然后丢弃。我可以想到一些结合视图和 jquery 的方法,但是在 Ember.js 中执行此操作的正确方法是什么?
进一步来说:
1)如何将表单参数从视图传递到将处理提交事件的控制器?
2) 如果我要创建一个路由来表示提交的表单状态,我如何将参数序列化为对 Ember 有意义的路由路径?这甚至可能吗?
由于还没有人回答,我创建了一个小提琴来展示我将如何做到这一点。
这是基本方法:
因此,该方法与以这种方式处理表单的传统方式根本不同:
该示例显示了一个输入名字和姓氏的表单(只是概念上,因为没有 HTML 表单元素)。输入的值会同步到模型,您可以“执行提交”。
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"));
}
});
显示使用值绑定的模板:
<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>