邦彦           Mastering {{Mustache}}          Mastering === 从入门到精通          2011.12.19http://mustache.github.com/
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, functi...
原理      replace 函数结合正则匹配,对字符串模版执行搜索替换      YUI3:      Y.substitute(s, o, f, recurse)      KISSY:      KISSY.substitute(str...
开始入门少逻辑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><s...
Demo      {            "header": "Colors",            "items": [                  {"name": "red", "first": true, "url":   ...
Demo      <h1>Colors</h1>      <li><strong>red</strong></li>      <li><a href=‚#Green‛>green</a></li>      <li><a href=‚#B...
权衡缺少逻辑能力 =>模版 => 简洁数据 => 复杂、冗余
开始精通{} => {{}}标签形式和 KISSY Template 一致if, else, 循环 =>{{#tag}}{{/tag}}通过纯粹标签实现
标签说明Mustache Tag Types
变量Variables
模版:                      数据:*   {{name}}             {"name":"Chris","company*   {{age}}              ":"<b>GitHub</b>"}* ...
区块Sections
情况一值为 false 或空列表,标签对内的信息不被展现
模版:                  数据:Shown.               {"person": true,}{{#nothin}}      Never shown!{{/nothin}}                    ...
情况二1)如果键名存在并且值为非false,执行输出2)如果值为非空列表,以循环形式逐一输出
模版:                     数据:{{#repo}}               {      <b>{{name}}</b>         "repo": [{{/repo}}               { "name...
情况三值为可调用对象(callableobject)时(通常是匿名函数),该对象将被调用,并同时将当前取值作为参数传入
模版:                      数据:{{#wrapped}}             {{{name}} is awesome.     "name":{{/wrapped}}             "Willy","wr...
情况四值为非 false 且非列表,则进行单一条目渲染
模版:                数据:{{#person}}         {"person": { "name":Hi {{name}}!       "Jon" }}{{/person?}}               +结果:Hi...
反向区块Inverted Sections
{{^person}}{{/person}}输出反向情况换句话说,就是当值不存在、false、空列表时进行输出
模版:                     数据:{{#repo}}               {"repo": []}      <b>{{name}}</b>{{/repo}}{{^repo}}      No repos :({{/...
注释Comments
模版:<h1>Today{{! ignore me }}.</h1>结果:<h1>Today.</h1>
局部模版 Comments
var view = {        name: "Joe",        winnings: {          value: 1000        }      };      var template = "Welcome, {{...
模版结构      结构(建议):      <script id=‚example-tpl‛ type=‚text/template‛>            <div>{{mustache}} template here…</div>   ...
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>  ...
请求数据XHR or JSONP:success : function (data) {      if (data.status === ‘ok’) {             //do sth a…      } else {       ...
渲染过程data.status === ‘ok’:a.   数据预处理 data.xxx = function () {…}b.   执行渲染 Mustache.to_html(template, data);c.   构建 DOM 树d.  ...
完Game over
Mastering Mustache
Upcoming SlideShare
Loading in …5
×

Mastering Mustache

2,349 views

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,349
On SlideShare
0
From Embeds
0
Number of Embeds
442
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mastering Mustache

  1. 1. 邦彦 Mastering {{Mustache}} Mastering === 从入门到精通 2011.12.19http://mustache.github.com/
  2. 2. substitute模版:<a href=‚{url}‛>{title}</a>数据:{url:‚http://www.taobao.com‛,title:‚淘宝网‛}替换:substitute(template, data)
  3. 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. 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. 5. 开始入门少逻辑Logic-less template.多语言支持Support JavaScript, Ruby, Python, PHP, Java,node.js…编辑器插件Support TextMate, Vim, Emacs, Coda.
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 权衡缺少逻辑能力 =>模版 => 简洁数据 => 复杂、冗余
  10. 10. 开始精通{} => {{}}标签形式和 KISSY Template 一致if, else, 循环 =>{{#tag}}{{/tag}}通过纯粹标签实现
  11. 11. 标签说明Mustache Tag Types
  12. 12. 变量Variables
  13. 13. 模版: 数据:* {{name}} {"name":"Chris","company* {{age}} ":"<b>GitHub</b>"}* {{company}}* {{{company}}}结果: +* Chris** &lt;b&gt;GitHub&lt;/b&gt;* <b>GitHub</b>
  14. 14. 区块Sections
  15. 15. 情况一值为 false 或空列表,标签对内的信息不被展现
  16. 16. 模版: 数据:Shown. {"person": true,}{{#nothin}} Never shown!{{/nothin}} +结果:Shown.
  17. 17. 情况二1)如果键名存在并且值为非false,执行输出2)如果值为非空列表,以循环形式逐一输出
  18. 18. 模版: 数据:{{#repo}} { <b>{{name}}</b> "repo": [{{/repo}} { "name": "resque" }, + { "name": "hub" }, { "name": "rip" } } ]结果:<b>resque</b><b>hub</b><b>rip</b>
  19. 19. 情况三值为可调用对象(callableobject)时(通常是匿名函数),该对象将被调用,并同时将当前取值作为参数传入
  20. 20. 模版: 数据:{{#wrapped}} {{{name}} is awesome. "name":{{/wrapped}} "Willy","wrapped": + function() { return function(text) { return "<b>" + render(text) + "</b>‚结果: } }<b>Willy is awesome.</b> }
  21. 21. 情况四值为非 false 且非列表,则进行单一条目渲染
  22. 22. 模版: 数据:{{#person}} {"person": { "name":Hi {{name}}! "Jon" }}{{/person?}} +结果:Hi Jon!
  23. 23. 反向区块Inverted Sections
  24. 24. {{^person}}{{/person}}输出反向情况换句话说,就是当值不存在、false、空列表时进行输出
  25. 25. 模版: 数据:{{#repo}} {"repo": []} <b>{{name}}</b>{{/repo}}{{^repo}} No repos :({{/repo}} +结果: No repos :(
  26. 26. 注释Comments
  27. 27. 模版:<h1>Today{{! ignore me }}.</h1>结果:<h1>Today.</h1>
  28. 28. 局部模版 Comments
  29. 29. 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 $1000https://github.com/janl/mustache.js
  30. 30. 模版结构 结构(建议): <script id=‚example-tpl‛ type=‚text/template‛> <div>{{mustache}} template here…</div> </script>http://documentcloud.github.com/backbone/examples/todos/index.html
  31. 31. MIME 浏览器不懂 text/template => 忽略该 script 标签对 => 放置任何代码片段http://www.rfc-editor.org/rfc/rfc4329.txt
  32. 32. 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
  33. 33. 请求数据XHR or JSONP:success : function (data) { if (data.status === ‘ok’) { //do sth a… } else { //do sth b… }}
  34. 34. 渲染过程data.status === ‘ok’:a. 数据预处理 data.xxx = function () {…}b. 执行渲染 Mustache.to_html(template, data);c. 构建 DOM 树d. 事件绑定等后续操作
  35. 35. 完Game over

×