*domtemp,一个简单的基于DOM的Javascript模板引擎,在任意节点的data-属性中引入{{}}即可,适合需要复用DOM节点的Web App网站。最大限度地减少绑定事件解除事件的次数。
dt(node, opt)
@param node: DOM节点,jQuery对象或者选择器字符串,必选。
@param opt: 对象,可选。比如{ thisp: XXObj, enable: "enable-msg", once: true }
所有可选参数。
可以给某些占位符指定固定的值或者特殊的处理函数,用法详见Q && A部分。
@return template,拥有某些特殊方法fill,append,clear,opt)的对象。
template.fill(data, append)
填充数据。
@param data 对象,必填。如data = {"user": { "name": "bufeng" }}
将会使用"bufeng"代替占位符 {{user.name}}。
@param 布尔,可选。如果为true,表示追加数据,否则首先清空然后填充数据。
@return template,返回自身。
template.append(data)
追加数组。作用等同于template.fill(data, true)
。
template.clear()
将所有占位符节点或属性去掉,文字清空。
@return template,返回自身。
template.fetch()
获取模板中的form元素的值,封装为一个javascript对象并返回。
@return javascript对象
- Download the zip package.
- Using bower: How to use bower
{
"name": "name of your project",
"version": "version of your project",
"main": ["main javascript file of your project"],
"dependencies": {
"domtemp": "1.0.0" // the latest stable version is 1.0.0
}
}
- Q:在创建模板的时候,怎样使用第二个参数(opt)?
A: 如果占位符的值是固定的,在模板创建以后就不会再改变,并且在调用fill方法时,不需要再次填充该值。比如在国际化过程中,label值仅仅跟语言有关,此时可以使用{genderLabel: "Gender"}
来设置此label值。
如果填充的值需要经过某种处理才能适应当前页面,比如填充的数据中gender的值是"m","f"(此数据直接来自数据库),但是页面需要显示的是"Male","Femal"。此时设置opt对象
{
gender: function( gender, data ){
return gender === "m" : "Male" : ( gender === "f" ? "Female" : "" );
}
}
- Q:如何编写合适的html文本?
A: 特殊处理的data-*属性有4个:data-each, data-value, data-indom和data-display。
data-each是为了显示一个数组数据,比如在玩家成就面板上显示所有的玩家所有的成就。
拥有each属性的节点包含两个个子节点,第一个表示当数组的个数大于0时,用于显示数组数据的模板,第二个用于显示数组个数为0时的信息,可以省略,此时不显示任何信息。
<ul data-each="achievement">
<li data-class="{{className}}" data-value="{{name}}"></li>
<li class="no-item">No Achievement.</li>
</ul>
以上是each的默认行为,可以在创建模板时使用opt指定特殊实现。如:
archievements: function( archs, data ){
var fragment = document.createDocumentFragment();
for( var i = 0; i < archs.length; i++ ){
fragment.appendChild( $("<li>", {"text": archs[i], "class": i % 2 ? "odd" : "even" })[0] );
}
if( archs.length === 0 ) fragment.appendChild( $("<div>", {"text": "No Archievement."})[0] );
return fragment;
}
data-value表示该节点的文本内容,类似innerHTML属性。
<p data-value="Your age must be larger than {{age}}."></p>
data-indom表示满足某种条件时,元素才被插入DOM树中。如以下代码表示当age >= 20时p才被插入DOM树中。
<p data-indom="{{age: val >= 20;}}">20+</p>
data-display表示满足某种条件时,会将style中display属性设置为空字符串,否则设置为none
。
<p data-display="{{age: val >= 20;}}">20+</p>
其他data-属性都会被设置属性。如data-class其实就是设置class属性。