一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

Ember.js 表单验证的使用例子

时间:2014-03-03 编辑:简简单单 来源:一聚教程网

•handlebars.js 模板1

 代码如下 复制代码

•Ember.TextField

Ember.TextField 是 Ember.js 内建的一个 View 类2,

 代码如下 复制代码

//template
{{view Ember.TextField valueBinding="value" placeholder="请输入用户名"}}
•扩展 Ember.TextField 类

// js
App.UsernameTextField = Ember.TextField.extend({

});

// template
{{view App.UsernameTextField valueBinding="value" placeholder="请输入用户名"}}

需求:对 input 里填写的用户名,我需要发起 ajax 请求到服务器,验证该用户名是否可用。

触发验证的时机:输入框失焦时。在 Ember.js 里,该事件为 foucusOut。我会在 input 输入框失去焦点时向服务器 API 接口请求结果。

一个最快的解决办法是,直接把事件绑定给 View 类的属性(以下说明均基于上面的第三种写法),如下3:

 代码如下 复制代码

App.UsernameTextField = Ember.TextField.extend({
  focusOut: function(evt){
    var username = this.get('value');
    console.log(username);
    //这里我可以使用 jQuery 发起 ajax 请求远程服务器进行表单验证
    $.post('http://www.example.com/api/user', {username: username}, function(response) {
      console.log(response);
    });
  }
});

因为我们在模板里对 value 做了双向绑定4,所以 View 里可以通过 this.get('value') 取得当前输入框的值。这样,在输入框失去焦点后,就可以将取得的用户名通过 ajax 请求发送到服务器要求验证

原文来自:zfanw.com

热门栏目