js模版引擎Mustache介绍

最新推荐文章于 2025-09-03 16:51:19 发布

weixin_30617561

最新推荐文章于 2025-09-03 16:51:19 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tancp/p/5446599.html

本文介绍了Mustache模板引擎的基本用法，包括简单的字符串模板渲染及复杂DOM结构的处理方式，并展示了如何利用Mustache进行数据循环展示。

Mustache.render("Hello, {{name}}", { name: "Jack" });
// 返回： Hello, Jack

一旦在页面中包含了Mustache，你就可以访问全局对象“Mustache”。你可使用其中最主要的方法“render”，它包含两个参数。首个参数是实际的模板，第二个参数则为需要传入的参数值。

上例中，你可以看见“{{name}}”。其中的“{{}}”实际上为Mustache的语法，表示一个占位符。当Mustache对其进行编译时，它将在传入的对像中寻找“name”属性，并用该属性的值（该例中为“Jack”）来代替“{{name}}”。

在这里，模板只为一个字符串，但如果你有一个更复杂的模板，该方法可能就不适用了。通常的解决方案是将模板放在“script”标签中：

<script type="text/x-mustache" id="template">

<p>Hello, {{name}}</p> 

</script>

然后，我们可以访问的script标签的内容。例如，使用jQuery，它很容易实现：

var temp = $("#template").html();  
Mustache.render(temp { name: "Jack" });  

// 返回： <p>Hello, Jack</p>

给“script”一个浏览器无法理解的“type”属性，浏览器就会忽略该Script，不将它作为JavaScript，也不会执行它。

你也可在模板中使用循环，如下面这个模板：

{{#people}}  
    {{name}}  
{{/people}}

传递数据：

{ people: [ { name: "Jack" }, { name: "Fred" } ] }

你将得到“JackFred”字符串。

转载于:https://www.cnblogs.com/tancp/p/5446599.html