如何在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小提琴供參考

默認情況下， Ember.TextField的值將綁定到我的模型，反之亦然，這意味着當我在文本上鍵入時，模型和視圖將實時更新，但是我想做的是將模型綁定到文本字段（因此將顯示初始名稱），但僅在提交表單時更新模型。 有一個簡單的方法嗎？

提前致謝。

編輯 ：僅供參考，我更新了小提琴以使用Ember.Binding.oneWay我認為最終結果比@ c4p答案更干凈： http : //jsfiddle.net/X2LmC/3/但是我不確定是否在做$('#user-name').val()獲取字段值是正確的方法。

Answer 1

您可以使用觀察者，控制器上的中間綁定變量和控制器上的事件處理程序來完成想要做的事情。

當nameDidChange()觀察器啟動時，將更新控制器的nameOnController屬性，確保nameOnController屬性將初始化為模型的name屬性，並反映對name任何將來更改。 將此中間屬性綁定到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");
    }
});

更新JSFiddle示例

您可以通過單擊“ Set New Name按鈕來檢查對name屬性的更改是否仍反映在文本框中。

Answer 2

這是更新的解決方案。

我有一個類似的問題，我需要單向綁定，但是在執行某些操作時，我需要最新的價值。 我還需要當前的編輯值。 以下是我的概念證明-

http://emberjs.jsbin.com/nocadubixi/edit?html,js，輸出

車把

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