如何在emberjs上使用单向绑定？

Question

我开始玩ember但是我无法解决的一件事是如何使用单向绑定,请考虑以下代码:

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

您可以使用观察者、控制器上的中间绑定变量以及控制器上的事件处理程序来完成想要做的事情。

当观察者触发时，控制器的属性nameOnController将被更新nameDidChange()，确保该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 示例

您可以name通过单击 按钮来检查对属性的更改是否仍反映在文本框中Set New Name。