ember.js|Ember.js 模板添加 HTML5 属性

更新时间:2019-05-01    来源:浏览器    手机版     字体:

【www.bbyears.com--浏览器】

最近开发一个 Chrome 扩展,因为基于 Chrome 浏览器,所以就放心大胆地用各种新技术,比如1:

 代码如下

 
 
 

required2 是 HTML5 增加的元素属性,应用于表单中 input、select、textarea 元素,表示它们是必须项,用户需要填写才能提交。如果提交空内容,浏览器就会显示原生的错误消息,比如:请填写此字段。

在 Ember.js 下,上面的 Email 输入框代码会是这样写的3:

 代码如下 {{view Ember.TextField name="email" valueBinding="email" type="email" placeholder="请输入邮箱地址" required="required" title="请输入邮箱地址"}}

检查 Ember.js 生成的 HTML 代码:

 代码如下

可以看到,required 与 title 两个属性被抛掉,这是因为 Ember.TextField 原生支持的 HTML 属性有限。但 HTML5 里,像 data-* 这样的属性是经常出现的,required 也很常见。不能因为 Ember.js 原生不支持这样的属性就不用。

Ember.js 提供了一个非常简单的 reopen 方法4,直接扩展 Ember.TextField 类的实例方法和实例属性:

 代码如下

Ember.TextField.reopen({
  attributeBindings: ["required", "title"]
});

再检查 Ember.js 生成的 HTML 代码:

 代码如下

已经成功地给 Ember.js 模板加入 HTML5 属性了。

本文来源:http://www.bbyears.com/bangongshuma/49841.html

热门标签

更多>>

本类排行