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

默认情况下，Ember.TextField的值将绑定到我的模型，反之亦然，这意味着当我键入文本时，模型和视图将实时更新，但我要做的是绑定将模型添加到文本字段（因此将显示初始名称），但仅在提交表单时更新模型。有没有简单的方法呢？

提前致谢。

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

Answer 1

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

当nameOnController观察者触发时，控制器的nameDidChange()属性将被更新，确保nameOnController属性将初始化为模型的name属性并反映任何属性未来对name的更改。将此中间属性绑定到TextField以使name属性与即时键入更改隔离，并使用控制器上的事件仅在单击按钮时读取和设置name属性。 / p>

模板：

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

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

2 个答案: