当前位置: 首页 > 工具软件 > mustache.js > 使用案例 >

mustache.js基本使用(一)

钱青青
2023-12-01

作者:zccst

模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因。

再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续学习,希望这次能够更深入一些。

这次学习的是mustache.js,他的理念是让模板尽量保持简单,甚至连基本的逻辑判断都不需要用。

本文基本要点:

1,基本用法

2,使用模板(写在页面或异步获取)

3,集中变量定义

官方地址:GitHub - janl/mustache.js: Minimal templating with {{mustaches}} in JavaScript

以下是公共文件

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
$(function(){

...

});

<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
  Hello {{ name }}!
</script>


1,最基础的用法
var template = '{{title}} spends {{calc}}';
    var obj = {
    title: "Joe",
    calc: function () {
        return 2 + 4;
    }
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered);
 



2,还可以使用模板
总结:两个基本素材:template, obj。前者和后者都可以简单,也可以复杂
Mustache替换:var result = Mustache.render(template, obj);
渲染到页面:$("xxID").html(result);

var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {name: "Luke"});
$('#target').html(rendered);



3,template除了直接赋值和来自页面外,还可以异步获取。
var obj = {};
$.get('template.mst', function(template){
    var result = Mustache.render(template, obj);
    $("xxID").html(result);
});
总结:template有三种来源:
(1)直接字符串
(2)本页面中带ID的script
(3)异步获取
 


4,几种变量
最基本变量 :{{ company }}
原样输出变量:{{{ company }}}或{{ &company }}
嵌套用点变量:{{name.first}} {{name.last}}

 类似资料: