如何在emberjs上使用单向绑定？ [英] How to use one-way binding on emberjs?

问题描述

我开始玩with ber ber ber but but but but around around around around around around around b b b b，，，，，，，，，，，，，：：：：：：：：：：：：：：： $ b

HTML

 < script type =text / x-handlebars> ; 
< h1>某些App< / h1> 
< p> 
我的名字是：{{name}} 
< / p> 
< form {{action'updateName'on =submit}}> 
 {{view Ember.TextField valueBinding =name}} 
< input type =submitvalue =保存> 
< / form> 
< / script> 
  

JS

  var App = Ember.Application.create（）; 
 
 App.ApplicationRoute = Ember.Route.extend（{
 model：function（）{
 return {
 name：'John Doe'
} 
}，
事件：{
 updateName：function（）{
 console.log（'Name Updated！'）; 
} 
} 
}）; 
  

JS Fiddle参考

默认情况下， Ember.TextField 的值将被绑定到我的模型和反对意味着当我在文本上键入模型和视图将被实时更新，但是我想要做的是将模型绑定到文本框（因此将显示初始名称），但更新模型只有当表单提交时。有一个简单的方法吗？

提前感谢。

编辑：只是为了参考，我更新了我的小提琴使用 Ember.Binding.oneWay 我认为最终结果比@ c4p更清洁答案： http://jsfiddle.net/X2LmC/3/ 但是我不知道如果做 $（'＃user -name'）。val（）获取字段值是正确的方法。

解决方案

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

nameOnController 属性将在 nameDidChange（）观察器触发时更新，确保 nameOnController 属性将初始化为模型的名称属性，并将以后的更改反映到名称中。将这个中间属性绑定到 TextField 以使直接键入更改的名称与/或code>属性隔离，并使用控制器上的事件只有当按钮被点击时才读取并设置名称属性。

模板：

  {{查看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示例

您可以检查对名称属性的更改仍然反映在文本框中，点击设置新名称按钮。

I'm starting to play around with ember but one thing I haven't been able to wrap my head around is how to use one-way bindings, consider the following code:

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

By default the Ember.TextField's value will be bound to my model and viceversa which means that when I type on the text the model and view will be updated live, however what I'm trying to do is bind the model to the textfield (so the initial name will be displayed) but update the model only when the form is submitted. Is there an easy way to do it?

Thanks in advance.

EDIT: Just for reference I updated my fiddle to use Ember.Binding.oneWay I think the end result is cleaner than @c4p answer: http://jsfiddle.net/X2LmC/3/ however I'm not sure if doing $('#user-name').val() to get the field value is the right way to do it.

解决方案

You can use an observer, an intermediate bound variable on the controller, and an event handler on the controller to accomplish what want to do.

The nameOnController property of the controller will be updated when the nameDidChange() observer fires, making sure that the nameOnController property will initialize to the model's name property and reflect any future changes to name. Bind this intermediate property to the TextField to insulate the name property from immediate typing changes and use an event on the controller to read and set the name attribute only when the button is clicked.

template:

{{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

You can check that changes to the name property are still reflected in the text box by clicking the Set New Name button.

这篇关于如何在emberjs上使用单向绑定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！