5

我开始玩 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 供参考

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

提前致谢。

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

4

2 回答 2

4

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

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

于 2013-05-10T00:10:24.737 回答
1

这是一个更新的解决方案。

我有一个类似的问题，我需要一个单向绑定，但是在某些操作后我需要最新的值。我还需要当前编辑的值。下面是我的概念证明——

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'),
});
于 2015-07-08T17:04:01.107 回答