javascript - 我如何处理 ember.js 中的表单提交？

Question

我有一个带有各种控件的表单。当提交按钮被按下时，一个 ajax 请求被发送到服务器，服务器用我想正确显示的一些 json 数据来回答。这是一次性的事情，不需要绑定(bind)等，数据被读取一次并在之后被丢弃。我可以想出一些方法来结合 View 和 jquery，但是在 Ember.js 中正确的方法是什么？

更具体地说:

1) 如何将表单参数从 View 传递到将要处理提交事件的 Controller ？

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

Answer 1

由于还没有人回答，我创建了一个 fiddle展示我对此的看法。

这是基本方法:

1. 我会设置一个带有全新(== 空)模型的 Controller 。
2. 使用绑定(bind)将表单元素的值同步到 Controller 的模型。
3. 创建一个采用更新后的模型并根据需要执行任何操作的操作(这取代了传统的表单提交)。

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

1. 没有 HTML 表单元素，因为不需要它。
2. 数据不会自动提交到服务器，您可以通过 javascript 逻辑手动发送/提交。恕我直言，这是一个优势，因为您可以在将数据提交到服务器之前或之后执行其他逻辑。
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"));
    }
});

显示值绑定(bind)使用的模板:

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