36
邦邦 Mastering {{Mustache}} Mastering === 从从从从从从 2011.12.19 http://mustache.github.com/

Mastering {{Mustache}}

  • Upload
    quasim

  • View
    72

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Mastering {{Mustache}}

邦彦Mastering {{Mustache}}

Mastering === 从入门到精通2011.12.19

http://mustache.github.com/

Page 2: Mastering {{Mustache}}

substitute模版 :<a href=“{url}”>{title}</a>

数据 :{url:“http://www.taobao.com”,title:“ 淘宝网” }

替换 :substitute(template, data)

Page 3: Mastering {{Mustache}}

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

Page 4: Mastering {{Mustache}}

原理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/

Page 5: Mastering {{Mustache}}

{

Page 6: Mastering {{Mustache}}

开始入门少逻辑Logic-less template.

多语言支持Support JavaScript, Ruby, Python, PHP, Java, node.js…

编辑器插件Support TextMate, Vim, Emacs, Coda.

Page 7: Mastering {{Mustache}}

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

Page 8: Mastering {{Mustache}}

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

Page 9: Mastering {{Mustache}}

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

Page 10: Mastering {{Mustache}}

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

Page 11: Mastering {{Mustache}}

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

Page 12: Mastering {{Mustache}}

标签说明Mustache Tag Types

Page 13: Mastering {{Mustache}}

变量Variables

Page 14: Mastering {{Mustache}}

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

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

+结果 :* Chris** &lt;b&gt;GitHub&lt;/b&gt;* <b>GitHub</b>

Page 15: Mastering {{Mustache}}

区块Sections

Page 16: Mastering {{Mustache}}

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

Page 17: Mastering {{Mustache}}

模版 :Shown.{{#nothin}}

Never shown!{{/nothin}}

数据 :{"person": true,}

+结果 :Shown.

Page 18: Mastering {{Mustache}}

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

Page 19: Mastering {{Mustache}}

模版 :{{#repo}}

<b>{{name}}</b>{{/repo}}

数据 :{

"repo": [{ "name": "resque" },{ "name": "hub" },{ "name": "rip" }

]}

+结果 :<b>resque</b><b>hub</b><b>rip</b>

Page 20: Mastering {{Mustache}}

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

Page 21: Mastering {{Mustache}}

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

数据 :{"name": "Willy","wrapped": function() {

return function(text) {

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

}}}

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

Page 22: Mastering {{Mustache}}

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

Page 23: Mastering {{Mustache}}

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

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

+结果 :Hi Jon!

Page 24: Mastering {{Mustache}}

反向区块Inverted Sections

Page 25: Mastering {{Mustache}}

{{^person}}{{/person}}

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

Page 26: Mastering {{Mustache}}

模版 :{{#repo}}

<b>{{name}}</b>{{/repo}}{{^repo}}

No repos :({{/repo}}

数据 : {"repo": []}

+结果 :

No repos :(

Page 27: Mastering {{Mustache}}

注释Comments

Page 28: Mastering {{Mustache}}

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

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

Page 29: Mastering {{Mustache}}

局部模版Comments

Page 30: Mastering {{Mustache}}

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

Page 31: Mastering {{Mustache}}

模版结构结构(建议) :<script id=“example-tpl” type=“text/template”>

<div>{{mustache}} template here…</div></script>

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

Page 32: Mastering {{Mustache}}

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

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

Page 33: Mastering {{Mustache}}

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

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

jquery: <script type="text/x-jquery-tmpl"><script>

backbone.js:<script type="text/template"><script>

Page 34: Mastering {{Mustache}}

请求数据XHR or JSONP:success : function (data) {

if (data.status === ‘ok’) {//do sth a…} else {//do sth b…}

}

Page 35: Mastering {{Mustache}}

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

Page 36: Mastering {{Mustache}}

完Game over