2

RC1 の下で Ember フォームからの更新を適切に入力して受け入れる方法を理解するのに苦労しています。この jsfiddleで必要最小限にまで煮詰めました。特定のエンティティ (姓と名を持つユーザー) のフォームを表示するのに十分な距離があり、現在の値がフィールドに入力されます。ただし、ユーザーが入力すると、キーストロークごとにフィールドが実際に更新され、[戻る] ボタンをクリックすると、[更新] ボタンをクリックしなくてもデータが既に変更されていることがわかります。更新の間にいくつかのロジックを保持し、ユーザーが更新ボタンをクリックした後にのみ更新を確認したいと思います。

{{#view App.PersonFormView}}
  First name: {{view Ember.TextField valueBinding="firstName"}}
  Last name: {{view Ember.TextField valueBinding="lastName"}}
  <button {{action "updatePerson"}}>Update</button>
{{/view}}

フォーム テンプレートで、Ember.js の例の 1 つに従おうとしましたが、そうすると長い遅延が発生し、RC1 を使用すると恐ろしい非推奨の警告が表示されました。例はまだ更新されていると思います。フォームが存在する場合は、よりエレガントな方法でフォームをコーディングすることをお勧めします。

2 つ目の問題は、フォーム ビューまたはコントローラーのいずれかで送信イベント自体をキャプチャできないことです。このイベントの行方はわかりません。

App.PersonFormController = Ember.ObjectController.extend({
  updatePerson: function(params){
    // this doesn't get triggered as I would have expected
    console.log('controller updatePerson: '+params);
  }
});
App.PersonFormView = Ember.View.extend({
  tagName: 'form',
  updatePerson: function(params){
    // this doesn't get triggered either!
    console.log('updatePerson params: '+params);
  }
});

要約すると、次のことが必要です。

  • ユーザーが入力している間にモデルのデータに直接リンクすることなく、入力フィールドに値を入力します
  • 送信ボタン (または他のコントロールでも問題ありません) のクリック イベントとフィールド (およびエンティティの ID) をキャッチして、手動でモデルのデータに戻すことができるようにします。
4

1 に答える 1

7

いくつかのことがあります：

送信イベント自体をキャプチャできません

イベントは、ビューではなく、コントローラーとルートで発生します。コントローラーPersonFormControllerがイベントをキャッチしなかった理由は、名前が間違っているためです。コントローラーは、ルートに基づいて名前を付ける必要があります: EditPersonController.

通常は、アクションとともにモデルを渡すのが適切です。

<button {{action "updatePerson" content}}>Update</button>

イベントをキャッチする更新バージョンは次のとおりです: http://jsfiddle.net/teddyzeenny/L9HMm/5/

モデルのデータに直接リンクさせずに、入力フィールドに値を入力する

コードの重複を避けるために、フィールドをモデルに直接バインドすることをお勧めします。

あなたの問題は、フィールドがモデルに直接バインドされていることではなく、何が起こっているのかを制御できないことです(保存された、保存されていない、ルートを離れた...)

確実に制御するには、ルートに更新ロジックを配置することをお勧めします。そうすれば、ユーザーがルートに出入りするときにそれに応じて行動できます。

ルートでイベントをキャッチするには:

App.EditPersonRoute = Ember.Route.extend({
    events: {
        updatePerson: function(record) {
          record.one('didUpdate', this, function() {
            this.transitionTo('index');
          });
          record.get('transaction').commit();
        }
    }
});

ユーザーが をクリックしない場合に変更をロールバックするには、ルートでコールバックをUpdate使用します。deactivate

App.EditPersonRoute = Ember.Route.extend({
    deactivate: function() {
      this.modelFor('editPerson').get('transaction').rollback();
    },
    events: {
        updatePerson: function(record) {
          record.one('didUpdate', this, function() {
            this.transitionTo('index');
          });
          record.get('transaction').commit();
        }
    }
});

ember-dataモデルを使用していないため、これらはフィドルでは機能しません。

于 2013-02-28T10:44:01.343 に答える