mustache.js一个零依赖的模板系统实现
【摘要】 多种语言实现:http://mustache.github.io/ js版本文档:https://github.com/janl/mustache.js
简介: mustache.js is a zero-dependency implementation of the mustache template system in JavaScript.
Node 环境使...
多种语言实现:http://mustache.github.io/
js版本文档:https://github.com/janl/mustache.js
简介:
mustache.js is a zero-dependency implementation of the mustache template system in JavaScript.
Node 环境使用
安装
$ npm install mustache --save
- 1
基本语法
变量: {{name}}
列表:{{#list}}{{.}}{{/list}}
对象:{{obj.name}} - {{obj.age}}
- 1
- 2
- 3
代码示例
const Mustache = require("Mustache");
var data = {
name: "Tom",
age: 23,
};
var template = "my name is {{name}}, and {{age}} years old";
var result = Mustache.render(template, data);
console.log(result);
// my name is Tom, and 23 years old
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
浏览器中使用
最终效果是把id=template
的内容渲染后替换到id=target
<script src="https://unpkg.com/mustache@latest"></script>
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
hello {{name}}
</script>
<script>
(function () { var template = document.getElementById("template").innerHTML; var rendered = Mustache.render(template, { name: "Tom" }); document.getElementById("target").innerHTML = rendered;
})();
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
异步加载模板
模板文件 template.html
hello {{name}}
- 1
异步渲染
<script src="https://unpkg.com/mustache@latest"></script>
<div id="target">Loading...</div>
<script>
(function () { fetch("./template.html") .then((response) => response.text()) .then((template) => { var rendered = Mustache.render(template, { name: "Tom" }); document.getElementById("target").innerHTML = rendered; });
})();
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。
原文链接:pengshiyu.blog.csdn.net/article/details/105945945
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)