如何绑定模型属性（来自控制器），而不需要立即触发验证？ [英] How to bind a model property (from controller) without it firing validation right away?

问题描述

我有一个简单的模型支持的控制器，对全名进行简单的验证。我将验证添加到模型错误计算属性中，如下所示。它的工作很好，除了这个计算的属性立即被触发，在呈现表单时显示请输入用户名错误。

问题是-how 应该我这样做是为了获得很好的计算属性/ 2路数据绑定属性和错误消息，但...这不会立即启动（而是等待用户首先输入内容）。

  var UserController = Ember.Controller。 extend（{
 actions：{
 submit：function（）{
 //验证模型是否合法... transitionToRoute如果是这样
} 
} 
 }）; 
 
 var User = Ember.Object.extend（{
 enteredUsername：，
 username：function（）{
 var enteredUsername = this.get（enteredUsername ）; 
 return enterUsername.trim（）; 
} .property（enteredUsername），
 usernameError：function（）{
 var username = this.get（username ）; 
如果（！username）{
返回请输入用户名; 
} 
} .property（username）
}）; 
 
 {{input type =textvalue = model.enteredUsername}} 
< span class =input-error> {{model.usernameError}}< / span> ; 
  

解决方案

像@Sisir一样，你可能需要一些排序变量来检查模型值是否脏。这是一种实现方法。基本上，模型属性将包含值和 isDirty 属性。所以 enteredUsername 将

  enteredUsername：{
 value： ''，
 isDirty：false 
} 
  

您修改的代码看起来像

  var User = Ember.Object.extend（{
 enteredUsername：{
 value：'' 
 isDirty：false 
}，
 
用户名：function（）{
 var value = this.get（enteredUsername.value）trim（）; 
 
 //一旦脏设置，那么不要重置
 if（！this.get（'enteredUsername.isDirty'））{
 this.set（'enteredUsername.isDirty' ，value.length> 0）; 
} 
 
返回值; 
} .property（'enteredUsername.value'），
 
 usernameError： function（）{
 var username = this.get（username）; 
 var isDirty = this.get（'enteredUsername.isDirty'）; 
 if（！username&& isDirty）{
 return请输入用户名; 
} 
} .property（'userna我'，'enteredUsername.isDirty'）
}）; 
  

这是一个工作演示。

I have a simple model backed controller with a simple validation on fullname. I added the validation to the models error computed property as shown below. It' works great except that this computed property is "fired" right away showing the "please enter a username" error right when the form is rendered.

Question is -how should I so this to get the nice computed property/2 way data bound property and error message but ... something that won't fire right away (instead waiting for the user to type something first).

var UserController = Ember.Controller.extend({
    actions: {
        submit: function() {
            //verify model is legit ... transitionToRoute if so
        }
    }
});

var User = Ember.Object.extend({
    enteredUsername: "",
    username: function() {
        var enteredUsername = this.get("enteredUsername");
        return enteredUsername.trim();
    }.property("enteredUsername"),
    usernameError: function() {
        var username = this.get("username");
        if (!username) {
            return "please enter a username";
        }
    }.property("username")
});

{{input type="text" value=model.enteredUsername}}
<span class="input-error">{{model.usernameError}}</span>

解决方案

Like @Sisir said, you may need to have some sort of variable to check if the model value is dirty. Here is a way to get that implemented. Basically a model property will comprise of a value and isDirty property. So enteredUsername will be

enteredUsername: {
  value: '',
  isDirty: false
}

Your modified code will look like

var User = Ember.Object.extend({
  enteredUsername: {
    value: '',
    isDirty: false
  },

  username: function() {
    var value = this.get("enteredUsername.value").trim();

    //Once dirty is set, then dont reset.
    if(!this.get('enteredUsername.isDirty')) {
        this.set('enteredUsername.isDirty', value.length > 0);
    }

    return value;
  }.property('enteredUsername.value'),

  usernameError: function() {
    var username = this.get("username");
    var isDirty = this.get('enteredUsername.isDirty');
    if (!username && isDirty) {
      return "please enter a username";
    }
  }.property('username', 'enteredUsername.isDirty')
});

Here is a working demo.

这篇关于如何绑定模型属性（来自控制器），而不需要立即触发验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！