读书人

mustache 事例

发布时间: 2013-10-19 20:58:22 作者: rapoo

mustache 例子

网上下载mustache-0.7.2.js 其他版本也可以

拷贝如下代码即可运行

<html>

<head>
<script type="text/javascript" src="mustache-0.7.2.js"></script>
<script type="text/javascript">
function change(){

var view = {
title: "Joe",
calc: function() {
return 2 + 4;
},

//只有对象才有键值对,数组只是元素是没有键值对的说法

//mustache中只要是键值对的形式 就能取出其值 呈现在页面上

person:[{firstname:"chen","age":20,"country":"china"},
{firstname:"gao","age":20,"country":"china"}]


}
var template = document.getElementById("test").innerHTML;
var html = Mustache.to_html(template , view);
document.getElementById("test2").innerHTML=html;


}
</script>

</head>
<body>
<div id="test" style="display:none">
{{title}} spends {{calc}} hello
{{#person}}
{{firstname}}
{{/person}}


</div>
<div id="test2">my content</div>
<input type="button" value="button" onclick="change()">
</body>


</html>

读书人网 >Web前端

热点推荐