作者: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 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}}

mustache.js基本使用(一)的更多相关文章

  1. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  2. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  3. mustache.js

    mustache.js 是一个 Mustache 模板系统的 JavaScript 实现. Mustache 模板语法的逻辑比较简单.它用于HTML,配置文件,源代码等.它的工作方式是通过通过以哈希值 ...

  4. 使用mustache.js 模板引擎输出html

    看了https://mustache.github.io/你就知道mustache是非常强大的模板引擎,支持多种语言,下面是个简单入门例子: MVC Model public class Studen ...

  5. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

  6. mustache.js使用基本(三)

    作者:zccst 本节要点是子模块(partials)和分隔符(delimiter)等 1,子模块(partials) /* {{>partials}}以>开始表示子模块,如{{> ...

  7. MVC客户端使用 Mustache.js把json数据填充到模版中

    使用Mustache的好处是:可以把一些反复用到的html部分定义成Mustache模版,以便多次使用.使用Mustache的大致步骤是: →从后台拿到json数据 →获取前台页面预先定义好Musta ...

  8. vue系列---Mustache.js模板引擎介绍及源码解析(十)

    mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...

  9. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

随机推荐

  1. php moungoDB

    moungoDB 语法 SQL查询语句 Mongo查询语句 CREATE TABLE USERS (a Number, b Number) 隐式的创建,或 MongoDB::createCollect ...

  2. SELinux(Security-Enhanced Linux)

    http://blog.csdn.net/myarrow/article/details/9839377 Security-Enhanced Linux(SELinux)的历史 一个小历史将有助于帮助 ...

  3. C: define many functions using predefine..

    /* Defines COUNTER. There must be exactly one such definition at file scope * within a program. */ # ...

  4. ajax2016/4/15 post与get

    post方式,数据放在send()里面作为参数传递 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); ...

  5. windows程序设计学习笔记(一)

    windows里的变量类型 1.简单重定义windows变量 BOOL (TRUE FALSE) INT UINT(32位,4字节) LONG DWORD(32位,4字节) lParam,wParam ...

  6. elasticsearch 索引优化

    ES索引优化篇主要从两个方面解决问题,一是索引数据过程:二是检索过程.  索引数据过程我在上面几篇文章中有提到怎么创建索引和导入数据,但是大家可能会遇到索引数据比较慢的过程.其实明白索引的原理就可以有 ...

  7. AutoFac使用方法总结

    AutoFac是.net平台下的IOC容器产品,它可以管理类之间的复杂的依赖关系.在使用方面主要是register和resolve两类操作. 这篇文章用单元测试的形式列举了AutoFac的常用使用方法 ...

  8. JSP直接调用一个action定向到页面

    方法:写function <script type="text/javascript"> function mainPas(){ window.location.hre ...

  9. FusionCharts使用问题及解决方法(三)-FusionCharts常见问题大全

    前两篇文章中,我们总结了FusionCharts图表的一些常见问题(FAQ)及解决方法,本文继续讨论FusionCharts使用者常见的一些复杂的报错及解决方法. 当HTML.SWF和JavaScri ...

  10. Exponential notation

    Exponential notation You are given a positive decimal number x. Your task is to convert it to the &q ...