开发者社区> auqbllxiu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

mustache.js一个零依赖的模板系统实现

简介: 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 环境使用

安装

$ npm install mustache --save

基本语法

变量: {{name}}

列表:{{#list}}{{.}}{{/list}}
对象:{{obj.name}} - {{obj.age}}

代码示例

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

浏览器中使用

最终效果是把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>

异步加载模板

模板文件 template.html

hello {{name}}

异步渲染

<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>


            </div>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
mustache.js一个零依赖的模板系统实现
mustache.js一个零依赖的模板系统实现
12 0
mustache.js一个零依赖的模板系统实现
mustache.js一个零依赖的模板系统实现
14 0
mustache.js一个零依赖的模板系统实现
mustache.js一个零依赖的模板系统实现
12 0
mustache.js一个零依赖的模板系统实现
mustache.js一个零依赖的模板系统实现
16 0
Vue 源码之 mustache 模板引擎(一)
Vue 源码之 mustache 模板引擎(一)
34 0
IDEA+Java+JSP+Mysql+Tomcat实现Web教师信息管理系统
IDEA+Java+JSP+Mysql+Tomcat实现Web教师信息管理系统
94 0
mustache.js一个零依赖的模板系统实现
mustache.js一个零依赖的模板系统实现
68 0
Java Web(四) 一次性验证码的代码实现
其实实现代码的逻辑非常简单,真的超级超级简单。
39 0
神器:REST测试工具[wiztools.org restclient]客户端Jar依赖Java安装环境
背景 使用Spring Boot开发集群应用,架构风格启用RestFul之后表单Post请求无法Url测试,必须使用专用工具测试 主题 经过亲身感受,测试发现最靠谱的工具非[wiztools.org restclient]莫属 特色 支持本地测试,不依赖任何第三发 支持所有报头,任意切换 Java编写,跨平台运行 内容 1、输入完整的服务地址,例如“http://172.16.90.64:8080/bindCard” 2、Method选择Post 3、Body选择Sting Body,选择json格式,高亮区域输入测试的Json串。
1156 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
JS 语言在引擎级别的执行过程
立即下载
基于webpack和npm的前端组件化实践
立即下载