整合Mustache做kitjs模板引擎,基本写法${varname} [复制链接]查看:906回复:0

1#
整合Mustache做kitjs模板引擎,基本写法${varname}        号外:kitjs官方讨论QQ群建立了,QQ群号88093625,欢迎大家加入,讨论前端相关话题
kit整合了优秀的javascript模板引擎Mustache,做模板模块,基本写法为${varname}
demo地址:http://xueduany.github.com/KitJs/KitJs/index.html#template
jsdoc地址:http://localhost/jsdoc/out/$Kit.Template.html
基本用法如下,如果需要了解更多特殊用法,请访问Mustache官网http://mustache.github.com/
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.{{! }}注释
分享 转发