Your SlideShare is downloading. ×
Mastering Mustache
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Mastering Mustache

1,982
views

Published on

Published in: Technology, Business

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,982
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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