web-dev-qa-db-ja.com

ember.jsでフォーム送信を処理するにはどうすればよいですか？

さまざまなコントロールを備えたフォームがあります。送信ボタンを押すと、ajaxリクエストがサーバーに送信され、サーバーは適切に表示したいjsonデータで応答します。これは1回限りのものであり、バインディングなどは必要ありません。データは1回だけ読み取られ、後で破棄されます。ビューとjqueryを組み合わせてこれを行ういくつかの方法を考えることができますが、Ember.jsでこれを行うproper方法は何ですか？

すなわち：

1）ビューからフォームイベントを送信イベントを処理するコントローラーにどのように通信しますか？

2）送信されたフォームの状態を表すルートを作成する場合、Emberにとって意味のあるルートパスにパラメーターをシリアル化するにはどうすればよいですか？それは可能ですか？

javascriptjqueryember.js
25
kliron

まだ誰も答えていないので、私は fiddle を作成しました。

これが基本的なアプローチです。

  1. コントローラーを新しい（==空の）モデルでセットアップします。
  2. bindingsを使用して、フォーム要素の値をコントローラーのモデルに同期させます。
  3. 更新されたモデルを受け取り、それを使用して必要な処理を行うアクションを作成します（これにより、従来のフォームsubmitが置き換えられます）。

そのため、アプローチはこのようにフォームを処理する従来の方法とは根本的に異なります：

  1. 必要がないため、HTMLフォーム要素はありません。
  2. データはサーバーに自動的に送信されず、代わりにjavascriptロジックを介して手動で送信/送信します。これは、サーバーにデータを送信する前または後に追加のロジックを実行できるので、利点です。
  3. これは、ember-dateまたはember-epf :-)のようなREST-APIアプローチでうまく機能します

この例は、姓と名を入力するためのフォームを示しています（概念的には、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>
36
mavilein