Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
邦彦           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,429 views

Published on

Published in: Technology, Business
  • Be the first to comment

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

×