javascript - 如何在 emberjs 上使用单向绑定(bind)？

Question

我开始尝试使用 ember，但有一件事我无法完全理解如何使用单向绑定(bind)，请考虑以下代码:

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 的值将绑定(bind)到我的模型，反之亦然，这意味着当我在文本上键入时，模型和 View 将实时更新，无论我是什么试图做的是将模型绑定(bind)到文本字段(因此将显示初始名称)但仅在提交表单时更新模型。有简单的方法吗？

提前致谢。

编辑:仅供引用我更新了我的 fiddle 以使用Ember.Binding.oneWay 我认为最终结果比@c4p 答案更清晰:http://jsfiddle.net/X2LmC/3/但是我不确定执行 $('#user-name').val() 获取字段值是否是正确的方法。

Answer 1

您可以使用观察者、 Controller 上的中间绑定(bind)变量和 Controller 上的事件处理程序来完成想要做的事情。

Controller 的 nameOnController 属性将在 nameDidChange() 观察者触发时更新，确保 nameOnController 属性将初始化为模型的 name 属性并反射(reflect)将来对 name 的任何更改。将此中间属性绑定(bind)到 TextField 以将 name 属性与即时键入更改隔离开来，并使用 Controller 上的事件来读取和设置 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

您可以通过单击 Set New Name 按钮检查对 name 属性所做的更改是否仍反射(reflect)在文本框中。