Mastering mustache
Download
1 / 36

Mastering {{Mustache}} - PowerPoint PPT Presentation


  • 162 Views
  • Uploaded on

邦彦. Mastering {{Mustache}}. Mastering === 从入门到精通 2011.12.19. http://mustache.github.com/. substitute. 模版 : <a href =“{ url }”>{title}</a> 数据 : { url :“http:// www.taobao.com”,title :“ 淘宝网 ”} 替换 : substitute(template, data).

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Mastering {{Mustache}}' - quasim


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Mastering mustache

邦彦

Mastering {{Mustache}}

Mastering === 从入门到精通

2011.12.19

http://mustache.github.com/


A href url title a url http www taobao com title substitute template data

substitute

模版:<a href=“{url}”>{title}</a>数据:{url:“http://www.taobao.com”,title:“淘宝网”} 替换:substitute(template, data)


var template = ‘*****{a}*****{b}*****’, data = {a:“&&&&&”,b:“@@@@@”};template.replace(/\{([^{}]+)\}/g, function (match, key) { return (data[key] !== undefined) ? data[key] : ‘’;}); 这里 data 表示传入的 JSON 对象

http://yuilibrary.com/yui/docs/api/files/substitute_js_substitute.js.html#l16


Replace yui3 y substitute s o f recurse kissy kissy substitute str o regexp

原理

replace 函数结合正则匹配,对字符串模版执行搜索替换YUI3:Y.substitute(s, o, f, recurse)KISSY:KISSY.substitute(str, o, regexp)

http://www.planabc.net/2011/05/31/simple_javascript_template_substitute/


{


Logic less template support javascript ruby python php java node js support textmate vim emacs coda

开始入门

少逻辑Logic-less template.多语言支持Support JavaScript, Ruby, Python, PHP, Java, node.js…编辑器插件Support TextMate, Vim, Emacs, Coda.


Demo

<h1>{{header}}</h1>{{#bug}}{{/bug}}{{#items}}{{#first}} <li><strong>{{name}}</strong></li>{{/first}}{{#link}} <li><a href="{{url}}">{{name}}</a></li>{{/link}}{{/items}}{{#empty}} <p>The list is empty.</p>{{/empty}}

http://mustache.github.com/#demo


Demo

{ "header": "Colors", "items": [ {"name": "red", "first": true, "url": "#Red"}, {"name": "green", "link": true, "url": "#Green"}, {"name": "blue", "link": true, "url": "#Blue"} ],"empty": false}

http://mustache.github.com/#demo


Demo

<h1>Colors</h1><li><strong>red</strong></li><li><a href=“#Green”>green</a></li><li><a href=“#Blue”>blue</a></li>通过标记字段为 true 或 false 实现仅有的逻辑操作功能

http://mustache.github.com/#demo


权衡

缺少逻辑能力 =>模版 => 简洁数据 => 复杂、冗余


Kissy template if else tag tag

开始精通

{} => {{}}标签形式和 KISSY Template 一致if, else, 循环 => {{#tag}}{{/tag}}通过纯粹标签实现


Mustache tag types

Mustache Tag Types

标签说明


Variables

Variables

变量


Name age company company

  • 数据:{"name":"Chris","company":"<b>GitHub</b>"}

模版:* {{name}}* {{age}}* {{company}}* {{{company}}}

+

  • 结果:* Chris

  • *

  • * &lt;b&gt;GitHub&lt;/b&gt;

  • * <b>GitHub</b>


Sections

Sections

区块


False

情况一

值为 false 或空列表,标签对内的信息不被展现


Shown nothin never shown nothin

模版:Shown.{{#nothin}} Never shown!{{/nothin}}

+

  • 结果:Shown.


1 false 2

情况二

1)如果键名存在并且值为非 false,执行输出2)如果值为非空列表,以循环形式逐一输出


Repo b name b repo

  • 数据:{

  • "repo": [

  • { "name": "resque" },

  • { "name": "hub" },

  • { "name": "rip" }

  • ]

  • }

模版:{{#repo}} <b>{{name}}</b>{{/repo}}

+

  • 结果:<b>resque</b>

  • <b>hub</b>

  • <b>rip</b>


Callable object

情况三

值为可调用对象(callable object)时(通常是匿名函数),该对象将被调用,并同时将当前取值作为参数传入


Wrapped name is awesome wrapped

  • 数据:{

  • "name": "Willy","wrapped": function() {

  • return function(text) {

  • return "<b>" + render(text) + "</b>“

  • }

  • }

  • }

模版:{{#wrapped}}{{name}} is awesome.{{/wrapped}}

+

  • 结果:<b>Willy is awesome.</b>


False1

情况四

值为非 false 且非列表,则进行单一条目渲染


Person hi name person

  • 数据: {"person": { "name": "Jon" }}

模版:{{#person}}Hi {{name}}!{{/person?}}

+

  • 结果:Hi Jon!


Inverted sections

Inverted Sections

反向区块


Person person false

{{^person}}{{/person}}输出反向情况换句话说,就是当值不存在、false、空列表时进行输出


Repo b name b repo repo no repos repo

模版:{{#repo}} <b>{{name}}</b>{{/repo}}{{^repo}} No repos :({{/repo}}

+

  • 结果:No repos :(


Comments

Comments

注释


H1 today ignore me h1

模版:<h1>Today{{! ignore me }}.</h1>

  • 结果:<h1>Today.</h1>


Comments1

Comments

局部模版


var view = { name: "Joe", winnings: { value: 1000 }};var template = "Welcome, {{name}}! {{>winnings}}"var partials = { winnings: "You just won ${{value}}“};var output = Mustache.to_html(template, view, partials)output will be:Welcome, Joe! You just won $1000

https://github.com/janl/mustache.js


Script id example tpl type text template div mustache template here div script

模版结构

结构(建议):<script id=“example-tpl” type=“text/template”> <div>{{mustache}} template here…</div></script>

http://documentcloud.github.com/backbone/examples/todos/index.html


Text template script

MIME

浏览器不懂 text/template=> 忽略该 script 标签对=> 放置任何代码片段

http://www.rfc-editor.org/rfc/rfc4329.txt


MIME

<script><script><script type="text/javascript"><script><script type="application/javascript"><script><script type="application/x-javascript"><script>

jquery: <script type="text/x-jquery-tmpl"><script>backbone.js:<script type="text/template"><script>

http://www.rfc-editor.org/rfc/rfc4329.txt


Xhr or jsonp success function data if data status ok do sth a else do sth b

请求数据

XHR or JSONP:success : function (data) { if (data.status === ‘ok’) { //do sth a… } else { //do sth b… }}


Data status ok a data xxx function b mustache to html template data c dom d

渲染过程

data.status === ‘ok’:a. 数据预处理 data.xxx = function () {…}b. 执行渲染 Mustache.to_html(template, data);c. 构建 DOM 树d. 事件绑定等后续操作



ad