返回首页
模板---使用mustache
1.简单变量替换${name}
function _a1() {
$kit.el('#a1').innerHTML = $kit.template.render('${name} is awesome', {
name : '<b style="color:red">Willy</b>'
});
}
2.如果变量含有html的代码的,例如:<br>、<tr>等等而不想转义可以在用${&name}
function _a2() {
$kit.el('#a2').innerHTML = $kit.template.render('${&name} is awesome', {
name : '<b style="color:red">Willy</b>'
});
}
3.如果是对象,还能解释其属性
function _a3() {
$kit.el('#a3').innerHTML = $kit.template.render("name:${name.first} ${name.last},age:${age}", {
"name" : {
"first" : "Chen",
"last" : "Jackson"
},
"age" : 18
});
}
4.${#param}这个标签很强大,有if判断、forEach的功能。
function _a4() {
$kit.el('#a4').innerHTML = $kit.template.render("Shown.${#nothin}Never shown!${/nothin}", {
"nothin" : true
});
}
如果nothin是空或者null,或者是false都会输出Shown.相反则是Shown.Never shown!。
5.迭代
function _a5() {
$kit.el('#a5').innerHTML = $kit.template.render("${#stooges}${name}${/stooges}", {
"stooges" : [ {
"name" : "Moe"
}, {
"name" : "Larry"
}, {
"name" : "Curly"
} ]
});
}
6.如果迭代的是数组,还可以用${.}来替代每个元素
function _a6() {
$kit.el('#a6').innerHTML = $kit.template.render("${#musketeers}* ${&.}${/musketeers}", {
"musketeers" : [ "Athos", "Aramis", "Porthos", "D'Artagnan" ]
});
}
7.迭代输出的还可以是一个function返回的结果,function可以读取当前变量的上下文来获取其他属性执行其他操作
function _a7() {
$kit.el('#a7').innerHTML = $kit.template.render("${#beatles} *${name}${/beatles}", {
"beatles" : [ {
"firstName" : "John",
"lastName" : "Lennon"
}, {
"firstName" : "Paul",
"lastName" : "McCartney"
}, {
"firstName" : "George",
"lastName" : "Harrison"
}, {
"firstName" : "Ringo",
"lastName" : "Starr"
} ],
"name" : function() {
return this.firstName + " " + this.lastName;
}
});
}
8:方法里面可以再执行变量中的表达式
function _a8() {
$kit.el('#a8').innerHTML = $kit.template.render("${#bold}Hi ${name}.${/bold}", {
"name" : "${age}" + "Tater",
"bold" : function() {
return function(text, render) {
console.log(text);
return "" + render(text) + "";
};
},
"age" : 18
});
}
9.{{^}}与{{#}}相反,如果变量是null、undefined、 false、和空数组讲输出结果
10.{{! }}注释