如何在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>