如何在ember.js中处理表单提交？

Question

我有一个包含各种控件的表单.当按下提交按钮时,ajax请求被发送到服务器,该服务器回答了我想要正确显示的一些json数据.这是一次性的事情,不需要绑定等,数据是一次性读取并在之后丢弃.我可以想一些方法来组合视图和jquery,但是在Ember.js中这样做的正确方法是什么？

进一步来说:

1)如何将视图中的表单参数传递给将要处理提交事件的控制器？

2)如果我要创建一个表示提交的表单状态的路由,如何将参数序列化为对Ember有意义的路径？这甚至可能吗？

Answer 1

由于还没有人回答,我创造了一个小提琴,展示了我对此的看法.

这是基本方法:

1. 我会设置一个带有新鲜(==空)模型的控制器.
2. 使用绑定将表单元素的值同步到控制器的模型.
3. 创建一个采取更新模型的动作,并用它做任何你想做的事情(这取代了传统的表单提交).

因此,这种方法与以这种方式处理表单的传统方式根本不同:

1. 有没有HTML表单元素,因为它不需要.
2. 数据不会自动提交给服务器,而是 通过javascript逻辑手动发送/提交.Imho这是一个优点,因为您可以在将数据提交到服务器之前或之后执行其他逻辑.
3. 这与REST-API方法(如ember-date或ember-epf)很好地兼容:-)

该示例显示了一个表单(只是在概念上,因为没有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>