emberjsで一方向バインディングを使用するにはどうすればよいですか？

Question

私は燃えさしで遊ぶために始めているが、私は周りに私の頭をラップすることができていない一つのことは、一方向のバインディングを使用する方法で、次のコードを考えてみます。

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

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

ありがとうございます。

EDIT：ちょうど参考のために、私はEmber.Binding.oneWayを使用するために私のバイオリンを更新し、私は最終的な結果は、C4Pの答え@よりもきれいだと思う：私はフィールドの値を取得するために$('#user-name').val()を行うことに正しい方法であるかどうかわからないんだけどしかしhttp://jsfiddle.net/X2LmC/3/それをやる。

Answer 1

オブザーバー、コントローラー上の中間バインド変数、およびコントローラー上のイベントハンドラーを使用して、何をしたいかを実行することができます。

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

テンプレート：

{{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"); 
    } 
}); 

update JSFiddle example

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

Answer 2

更新されたソリューション。

私は同様の問題を抱えていましたが、片方向バインディングが必要でしたが、いくつかのアクションでは最新の値が必要でした。私はまた、現在の編集値が必要でした。以下 は概念の私の証明です -

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'), 
});