Mustache使用心得总结.doc

Mustache 使用心得总结前言: 之前的一个项目里面就有用到这个前台的渲染模版,当时挺忙的也没时间抽空总结一下,刚好上周项目里又用到这个轻量型的渲染模版,真心感觉很好用,因此就总结一下使用心得, 算是一个入门级别的指引吧。 1. Mustache 概述 Mustache 是基于 JavaScript 实现的模版引擎,类似于 JQuery Template ,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手。 2. Mustache 具体的使用下面就具体讲一下 Mustache 的使用。在开始讲之前,需要先从 git hub 上获取相关的 文件,获取文件之后,新建一个解决方案,目录如下: 然后就开始具体的使用,首先需要在页面的 head 标签内引用 和 s 两个脚本文件,主要有以下几个方面(以下演示的方法均在 head 标签中的 script 代码块中): 简单的对象绑定展示 l 代码示例: [javascript] view plain copy 1. $( function () { 2. var user ={ name: "Olive" , age: 23, sex: "girl" }; 3. var template = "My name is {{name}} ,I'm {{age}} ,Sex is {{sex} }" ; 4. var view = (template, user); 5. $( "#user_info" ).html(view); l 页面呈现效果: l 语法解释: i. Mustache 的语法很简单, 用两个大括号标记要绑定的字段即可, “{{}} ”; ii. 大括号内的字段名称要和 方法中的第二个参数中的对象的属性名一致 iii. 主要的渲染方法为 ,该方法有两个参数, 第一个为要渲染的模版, 也就是上例中的 template , 第二个就是数据源也就是上例中的 user 对象 对象数组循环渲染展示 l 代码示例: [javascript] view plain copy 1. var users ={ result: [{ name: "Only" , age: 24, sex: "boy" }, 2.{ name: "for" , age: 24, sex: "boy" }, 3.{ name: "Olive" , age: 23, sex: "girl" } 4.] 5. }; 6. var template = "<div><table cellpadding=0 cellspacing=0 class='tb ' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}} </td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>" ; 7. var views = (template, users); 8. $( "#use