5

私は残り火をいじり始めていますが、頭を包み込むことができなかったのは、一方向バインディングの使用方法です。次のコードを検討してください。

HTML

<script type="text/x-handlebars">
    <h1>Some App</h1>
    <p>
        My Name is: {{name}}
    </p>
    <form {{action 'updateName' on="submit"}}>
        {{view Ember.TextField valueBinding="name"}}
        <input type="submit" value="Save">
    </form>
</script>

JS

var App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return {
            name: 'John Doe'   
        }
    },
    events: {
        updateName: function() {
            console.log('Name Updated!');   
        }
    }
});

参照用の JS Fiddle

デフォルトでは、Ember.TextFieldの値はモデルにバインドされ、その逆も同様です。つまり、テキストを入力すると、モデルとビューがライブで更新されますが、私がしようとしているのは、モデルをテキストフィールドにバインドすることです (したがって、初期名が表示されます)、フォームが送信されたときにのみモデルを更新します。それを行う簡単な方法はありますか？

前もって感謝します。

編集：参考までに、使用するようにフィドルを更新しましEmber.Binding.oneWayた。最終結果は@c4pの回答よりもきれいだと思います：http://jsfiddle.net/X2LmC/3/しかし、$('#user-name').val()フィールド値を取得することが正しいやり方。

4

2 に答える 2

4

オブザーバー、コントローラーの中間バインド変数、およびコントローラーのイベント ハンドラーを使用して、目的を達成できます。

オブザーバーが起動すると、コントローラーのnameOnControllerプロパティが更新され、プロパティがモデルのプロパティに初期化され、将来の変更が に反映されるようになります。この中間プロパティを にバインドして、プロパティを即時の入力変更から隔離し、コントローラーでイベントを使用して、ボタンがクリックされたときにのみ属性を読み取って設定します。nameDidChange()nameOnControllernamenameTextFieldnamename

テンプレート：

{{view Ember.TextField valueBinding="nameOnController"}}

JS:

App.ApplicationController = Ember.ObjectController.extend({
    nameOnController: null,

    nameDidChange: function() {
      var name = this.get('name');
      this.set('nameOnController', name); 
    }.observes('name'),

    updateName: function() {
      var controllerName = this.get('nameOnController'); 
      this.set('name', controllerName);
    },

    setName: function() {
      this.set('name', "new name");
    }
});

JSFiddle の例を更新する

nameボタンをクリックすると、プロパティへの変更がテキスト ボックスに反映されていることを確認できSet New Nameます。

于 2013-05-10T00:10:24.737 に答える
1

これが更新されたソリューションです。

同様の問題があり、一方向のバインディングが必要でしたが、何らかのアクションで最新の値が必要でした。現在の編集値も必要でした。以下は私の概念実証です -

http://emberjs.jsbin.com/nocadubixi/edit?html,js,output

ハンドルバー:

    <h1>Some App</h1>
    <p>My Name is: {{model.name}}</p>
    <p>current value: {{currentName}}</p>

    {{one-way-field id="user-name" source=model.name action='handleNameChange'}}
    <button {{action 'updateName'}}>Save</button>

JS:

App = Ember.Application.create();

App.ApplicationController = Em.Controller.extend({
    model: {
      name: 'John Doe'
    },
    actions: {
      updateName: function() {
        this.set('model.name', this.get('currentName'));
      },
      handleNameChange: function(newValue) {
        this.set('currentName', newValue);
      },

    }
});


App.OneWayFieldComponent = Ember.TextField.extend({
  valueBinding: Ember.Binding.oneWay('source'),
  onValueChange: function() {
    this.sendAction('action', this.get('value'));
  }.observes('value'),
});
于 2015-07-08T17:04:01.107 に答える