作者:zccst
本文记录基本使用二,主要讲sections。
基本格式:{{#person}} {{/person}}
1,当person是null, undefined, false, 0, NaN, "", [], 空列表时不渲染
2,当person不空时渲染一次或多次。如果其中某一些为空,则改行略过,其他行正常。
var template = '{{#beatles}}* {{name}} <br/>{{/beatles}}';
var obj = {
"beatles": [
{ "firstName": "John", "lastName": "Lennon" },
{ "firstName": "Paul", "lastName": "McCartney" },
{ "firstName": "George", "lastName": "Harrison" },
{ "firstName": "Ringo", "lastName": "Starr" }
],
"name": function () {
console.log(this,this===obj);//结论:由于循环的是beatles,所以this指向的是beatles,而不是obj。
return this.firstName + " " + this.lastName;
}
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered);
3,相反,就是输出空,仅在 section标签是null, undefined, false, 空list时
用{{^section}} 替换 {{#section}}
var template = '{{#repos}}<b>{{name}}</b>{{/repos}} {{^repos}}No repos :({{/repos}}';
var obj = {
"repos": []
}
var rendered = Mustache.render(template,obj);
$('#target1').html(rendered);
4,特殊情况:数组,里面每一项都是字符串时,可以用点代替
var template = '{{#musketeers}}* {{.}} <br/>{{/musketeers}}';
var obj = {
"musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered);
5,function
var template = '{{#bold}}Hi {{name}}.{{/bold}}';
var obj = {
"name": "Tater",
"bold": function () {
return function (text, render) {
return "<b>" + render(text) + "</b>";//text是Hi {{name}}.render是原生函数
}
}
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered);
<div id="target">Loading...</div>
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
前端项目-mustache.js,无逻辑胡须带javascript的模板
Mustache是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手。
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用。 本资源包含了mustache.js 、mustache.min.js包 版本号v2.2.1
客户端模板技术。增加html代码的可维护性。高效转换Html代码。
mustache.js-带有JavaScript的无逻辑{{... 您可以在任何可以使用JavaScript的地方使用mustache.js呈现胡子模板。 这包括Web浏览器,服务器端环境(例如 )和视图。 mustache.js随附对模块API,API(AMD)和。 除了
使用Mustache.js实现的asp.net mvc客户端模版的例子
mustache.php, 在PHP中,mustache 实现 Mustache.phpPHP中的一个 mustache 。 用法一个简单的例子:<?php$m = new Mustache_Engine;echo $m->render('He
主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,感兴趣的小伙伴们可以参考...
前端项目-requirejs-mustache,mustache.js微模板的RequireJS/AMD加载程序插件
小胡子蜡 Wax是Mustache.js的扩展,它可以在类似Angular过滤器的样式中使用Mustache表达式内的格式化程序。 此扩展要求存在String.prototype.trim()方法,您可以从获取Polyfill:安装npm install @jvitela/...
帮助更多希望读懂vue源码的朋友们理解mustache工具
Yii2 mustache.js Yii2-扩展 该项目是根据的条款分发的。 安装 安装此扩展的首选方法是通过 。 要么跑 ...或添加 "xfg/yii2-mustache.js": "*" 到composer.json文件的 ... 'xfg\mustachejs\MustachejsAsset', ];
使mustache.js更易于开发人员使用。 技术支持 array index : array index第一个/最后一个/索引/中间 if {{#if(a == 1 || b == 3 && c == 3)}} blabla {{/ if(a == 1 || b == 3 && c == 3)}} if {{##(a!= 1...
主要为大家介绍了Javascript模板引擎mustache.js,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,需要的朋友可以参考下
StreamTable.js在后台流式传输表中的数据,并使用模板框架(例如Mustache.js,HandleBars.js)进行更新和呈现 为什么选择StreamTable.js? 有时我们想在一个表中显示数千条记录。 该页面可能要花费很长时间才能...
异步mustache.js 异步视图函数 提供异步视图功能的包装器 用法 节点: var Mustache = require ( 'mustache' ) ; var AsyncMustache = require ( 'async-mustache' ) ( { mustache : Mustache } ) ; var view = ...
OCaml中的mustache.js无逻辑模板 用法示例 let tmpl = try Mustache. of_string " Hello {{name}} \n \ Mustache is: \n \ {{#qualities}}\ * {{name}} \n \ {{/qualities}} " with Mustache. Parse_error ...
jQuery-Mustache-用于Mustache.js的jQuery插件是一个jQuery插件,它通过一点jQuery魔术使使用Mustache模板引擎的工作变得轻松。安装jQuery-Mustache有两个依赖项: 1.5或更高版本。 0.4或更高版本。 与所有jQuery...
前端项目-oj.mustache,Mustache plugin for OJ