作者:zccst
模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因。
再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续学习,希望这次能够更深入一些。
这次学习的是mustache.js,他的理念是让模板尽量保持简单,甚至连基本的逻辑判断都不需要用。
本文基本要点:
1,渲染
2,载入模板的几种方式
3,变量定义
官方地址:
https://github.com/janl/mustache.js
以下是公共文件
<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 rendered = Mustache.render(template,obj);
两个参数:一个是模板html,一个是数据源对象。
一个返回值:渲染后的html
2,载入模板的几种方式
(1)使用直接字符串作为template
//参数template
var template = '{{title}} spends {{calc}}';
//参数obj
var obj = {
title: "Joe",
calc: function () {
return 2 + 4;
}
}
//mustache渲染
var rendered = Mustache.render(template,obj);
//将返回的内容添加到页面
$('#target').html(rendered);
总结:
模板渲染两个基本素材:template, obj。前者和后者都可以简单,也可以复杂
Mustache替换:var result = Mustache.render(template, obj);
渲染到页面:$("xxID").html(result);
(2)使用页面内script块作为template
//拿到template
var template = $('#template').html();
//预解析(可选步骤)
Mustache.parse(template); // optional, speeds up future uses
//渲染
var rendered = Mustache.render(template, {name: "Luke"});
//将渲染后的内容,添加到页面
$('#target').html(rendered);
(3)异步获取内容作为template
a, 使用$.get()方式获取
var obj = {};
$.get('template.mst', function(template){
var result = Mustache.render(template, obj);
$("xxID").html(result);
});
b, 在模块化项目中,还可以使用var tpl = require("path/to/xx.tpl");将模板加载到当前页面。然后再用如下方式:
//头部require文件
var Backbone = require('backbone'),
Mustache = require('mustache'),
tpl = require('crownCommonKeyPreviewTpl');
//具体在某个方法中使用
var tpl_type = "crownCommonKeyPreview-Pc";
if(device == 2){
tpl_type = "crownCommonKeyPreview-Mobile";
}
var html = "",
tplArr = $(tpl);
for(var i=0; i<tplArr.length; i++){
var template = tplArr[i];
if($(template).html() && ($(template).attr("id") == tpl_type)){
html = Mustache.render($(template).html(), obj);
}
}
return html;
批注:在模块化项目中,require非常强大,相当于直接把模板文件载入到当前页面,由于模板文件中的格式是:
<script id="xx1" type="text/html">...</script>
<script id="xx2" type="text/html">...</script>
...
<script id="xxn" type="text/html">...</script>
所以使用$(tpl)后就是一个jQuery的模板对象数组了(array like)。
然后通过循环可以依次取出每一个模板,并通过$(item).attr("id")取出ID来做比较。
另外,对于空格换行(多行)jQuery也认为是一个TextNode,所以需要使用$(item).html()是否为空过滤掉。
批注:有一个坑是试图通过如下方式获取:
$(tpl).find("#crownCommonKeyPreview-Pc");
问题在于$(tpl)是一个jQuery对象数组,不是选择器。
总结:template有三种来源:
(1)直接字符串
(2)本页面中带ID的script
(3)异步获取
3,几种变量
最基本变量 :{{ company }}
原样输出变量:{{{ company }}}或{{ &company }}
嵌套用点变量:{{name.first}} {{name.last}}
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
前端项目-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,非常值得在项目中使用,感兴趣的小伙伴们可以参考...
小胡子蜡 Wax是Mustache.js的扩展,它可以在类似Angular过滤器的样式中使用Mustache表达式内的格式化程序。 此扩展要求存在String.prototype.trim()方法,您可以从获取Polyfill:安装npm install @jvitela/...
前端项目-requirejs-mustache,mustache.js微模板的RequireJS/AMD加载程序插件
帮助更多希望读懂vue源码的朋友们理解mustache工具
使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...
Yii2 mustache.js Yii2-扩展 该项目是根据的条款分发的。 安装 安装此扩展的首选方法是通过 。 要么跑 ...或添加 "xfg/yii2-mustache.js": "*" 到composer.json文件的 ... 'xfg\mustachejs\MustachejsAsset', ];
主要为大家介绍了Javascript模板引擎mustache.js,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,需要的朋友可以参考下
StreamTable.js在后台流式传输表中的数据,并使用模板框架(例如Mustache.js,HandleBars.js)进行更新和呈现 为什么选择StreamTable.js? 有时我们想在一个表中显示数千条记录。 该页面可能要花费很长时间才能...
node.js 将多个js文件压缩到一个文件 安装 node.js、java环境 1、org 原始文件 2、out 输出文件目录 使用方法 1、将原始js 复制到org目录 2、编辑nodescript.js文件,按顺序配置需要压缩的文件列表 var ...
异步mustache.js 异步视图函数 提供异步视图功能的包装器 用法 节点: var Mustache = require ( 'mustache' ) ; var AsyncMustache = require ( 'async-mustache' ) ( { mustache : Mustache } ) ; var view = ...
基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 标签:Mustache
jQuery-Mustache-用于Mustache.js的jQuery插件是一个jQuery插件,它通过一点jQuery魔术使使用Mustache模板引擎的工作变得轻松。安装jQuery-Mustache有两个依赖项: 1.5或更高版本。 0.4或更高版本。 与所有jQuery...