![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](https://image.slidesharecdn.com/masteringmustache-111218225645-phpapp02/85/Mastering-Mustache-3-320.jpg)
![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](https://image.slidesharecdn.com/masteringmustache-111218225645-phpapp02/85/Mastering-Mustache-8-320.jpg)
![模版: 数据:
{{#repo}} {
<b>{{name}}</b> "repo": [
{{/repo}} { "name": "resque" },
+ { "name": "hub" },
{ "name": "rip" }
}
]
结果:
<b>resque</b>
<b>hub</b>
<b>rip</b>](https://image.slidesharecdn.com/masteringmustache-111218225645-phpapp02/85/Mastering-Mustache-19-320.jpg)
![模版: 数据:
{{#repo}} {"repo": []}
<b>{{name}}</b>
{{/repo}}
{{^repo}}
No repos :(
{{/repo}} +
结果:
No repos :(](https://image.slidesharecdn.com/masteringmustache-111218225645-phpapp02/85/Mastering-Mustache-26-320.jpg)
Mastering Mustache
- 1. 邦彦 Mastering {{Mustache}} Mastering === 从入门到精通 2011.12.19 http://mustache.github.com/
- 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/
- 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}} 通过纯粹标签实现
- 13. 变量 Variables
- 14. 模版: 数据: * {{name}} {"name":"Chris","company * {{age}} ":"<b>GitHub</b>"} * {{company}} * {{{company}}} 结果: + * Chris * * <b>GitHub</b> * <b>GitHub</b>
- 15. 区块 Sections
- 17. 模版: 数据: Shown. {"person": true,} {{#nothin}} Never shown! {{/nothin}} + 结果: Shown.
- 19. 模版: 数据: {{#repo}} { <b>{{name}}</b> "repo": [ {{/repo}} { "name": "resque" }, + { "name": "hub" }, { "name": "rip" } } ] 结果: <b>resque</b> <b>hub</b> <b>rip</b>
- 21. 模版: 数据: {{#wrapped}} { {{name}} is awesome. "name": {{/wrapped}} "Willy","wrapped": + function() { return function(text) { return "<b>" + render(text) + "</b>? 结果: } } <b>Willy is awesome.</b> }
- 23. 模版: 数据: {{#person}} {"person": { "name": Hi {{name}}! "Jon" }} {{/person?}} + 结果: Hi Jon!
- 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