1 / 36

Mastering {{Mustache}}

邦彦. 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).

quasim
Download Presentation

Mastering {{Mustache}}

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 邦彦 Mastering {{Mustache}} Mastering === 从入门到精通 2011.12.19 http://mustache.github.com/

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

  3. 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

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

  5. {

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

  7. 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

  8. 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

  9. 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

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

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

  12. Mustache Tag Types 标签说明

  13. Variables 变量

  14. 数据:{"name":"Chris","company":"<b>GitHub</b>"} 模版:* {{name}}* {{age}}* {{company}}* {{{company}}} + • 结果:* Chris • * • * &lt;b&gt;GitHub&lt;/b&gt; • * <b>GitHub</b>

  15. Sections 区块

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

  17. 数据:{"person": true,} 模版:Shown.{{#nothin}} Never shown!{{/nothin}} + • 结果:Shown.

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

  19. 数据:{ • "repo": [ • { "name": "resque" }, • { "name": "hub" }, • { "name": "rip" } • ] • } 模版:{{#repo}} <b>{{name}}</b>{{/repo}} + • 结果:<b>resque</b> • <b>hub</b> • <b>rip</b>

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

  21. 数据:{ • "name": "Willy","wrapped": function() { • return function(text) { • return "<b>" + render(text) + "</b>“ • } • } • } 模版:{{#wrapped}}{{name}} is awesome.{{/wrapped}} + • 结果:<b>Willy is awesome.</b>

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

  23. 数据: {"person": { "name": "Jon" }} 模版:{{#person}}Hi {{name}}!{{/person?}} + • 结果:Hi Jon!

  24. Inverted Sections 反向区块

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

  26. 数据: {"repo": []} 模版:{{#repo}} <b>{{name}}</b>{{/repo}}{{^repo}} No repos :({{/repo}} + • 结果:No repos :(

  27. Comments 注释

  28. 模版:<h1>Today{{! ignore me }}.</h1> • 结果:<h1>Today.</h1>

  29. Comments 局部模版

  30. 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

  31. 模版结构 结构（建议）:<script id=“example-tpl” type=“text/template”> <div>{{mustache}} template here…</div></script> http://documentcloud.github.com/backbone/examples/todos/index.html

  32. MIME 浏览器不懂 text/template=> 忽略该 script 标签对=> 放置任何代码片段 http://www.rfc-editor.org/rfc/rfc4329.txt

  33. 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

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

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

  36. Game over 完

More Related