diff options
Diffstat (limited to 'demo')
| -rw-r--r-- | demo/SafeString.html | 56 | ||||
| -rw-r--r-- | demo/demo.html | 25 | ||||
| -rw-r--r-- | demo/execution-1.html (renamed from demo/index-1.html) | 17 |
3 files changed, 81 insertions, 17 deletions
diff --git a/demo/SafeString.html b/demo/SafeString.html new file mode 100644 index 0000000..64d1f54 --- /dev/null +++ b/demo/SafeString.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Handlebars 中文网：{ HTML 转义配合 SafeString }</title> + <link rel="stylesheet" href="../static/css/demo.css"> + <script src="../static/js/jquery-1.11.1.min.js"></script> + <script src="../static/js/handlebars-v3.0.0.js"></script> + <script src="../static/js/demo.js"></script> +</head> +<body> + <div class="ui-header"> + <h1 class="ui-header-title"> + <a href="../index.html" class="ui-header-tip">Handlebars 中文网：</a>{ HTML 转义配合 SafeString } + <span class="ui-header-more"> + <iframe src="http://ghbtns.com/github-btn.html?user=nimojs&repo=handlebarsjs.org&type=watch&count=true&size=large" + allowtransparency="true" frameborder="0" scrolling="0" width="131" height="30"></iframe> + </span> + </h1> + </div> + <div class="ui-box"><!-- ui-box Start --> + 建议将此页面保存至本地修改相关代码以帮助理解，与本示例相关的文档：<a href="../index.html#SafeString">HTML 转义配合 SafeString</a> + +<!-- 模板 --> +<script class="show" id="source" type="text/x-handlebars-template"> +{{{link "<em>html</em>" "http://www.handlebarsjs.org"}}} +</script> + +<!-- 数据 --> +<script class="show json-format-error" id="data" type="text/json"> + +</script> + +<!-- helper实现 --> +<script class="show" id="helper"> +Handlebars.registerHelper('link', function(text, url) { + // 将下行 text = ... 注释以查看未作安全性转义导致的文字倾斜效果 + text = Handlebars.Utils.escapeExpression(text); + url = Handlebars.Utils.escapeExpression(url); + + var result = '<a href="' + url + '">' + text + '</a>'; + + return new Handlebars.SafeString(result); +}); +</script> +<!-- 渲染结果字符 --> +<div class="expandingArea"> + <textarea class="show" id="result"></textarea> + <pre id="expandingPre"><span></span><br></pre> +</div> + +<div class="ui-dom" id="dom"></div> + </div><!-- ui-box End --> + <div class="ui-error" id="showerror"></div> +</body> +</html>
\ No newline at end of file diff --git a/demo/demo.html b/demo/demo.html index 603a7ac..03b3760 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -23,27 +23,32 @@ <!-- 模板 --> <script class="show" id="source" type="text/x-handlebars-template"> -{{{link "See more..." story.url}}} +{{#nimo}} +{{.}} {{root.a.b.c}} +{{/nimo}} </script> <!-- 数据 --> <script class="show json-format-error" id="data" type="text/json"> { - "story": { - "url": "http://www.handlebarsjs.org" - } + "a":{ + "b":{ + "c":"cccc" + } + }, + "nimo": [ + 1 + , + 2 + ] } </script> <!-- helper实现 --> <script class="show" id="helper"> -Handlebars.registerHelper('link', function(text, url) { - url = Handlebars.escapeExpression(url); - text = Handlebars.escapeExpression(text); +Handlebars.registerHelper('helper-name', function(obj) { + return 'output' - return new Handlebars.SafeString( - "<a href='" + url + "'>" + text + "</a>" - ); }); </script> <!-- 渲染结果字符 --> diff --git a/demo/index-1.html b/demo/execution-1.html index ec6eab3..c5f2147 100644 --- a/demo/index-1.html +++ b/demo/execution-1.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <title>Handlebars 中文网：{ Handlebars 中文网：轻逻辑语义化的模板引擎 }</title> + <title>Handlebars 中文网：{ Handlebars 执行渲染 }</title> <link rel="stylesheet" href="../static/css/demo.css"> <script src="../static/js/jquery-1.11.1.min.js"></script> <script src="../static/js/handlebars-v3.0.0.js"></script> @@ -11,7 +11,7 @@ <body> <div class="ui-header"> <h1 class="ui-header-title"> - <a href="../index.html" class="ui-header-tip">Handlebars 中文网：</a>{ Handlebars 中文网：轻逻辑语义化的模板引擎 } + <a href="../index.html" class="ui-header-tip">Handlebars 中文网：</a>{ Handlebars 执行渲染 } <span class="ui-header-more"> <iframe src="http://ghbtns.com/github-btn.html?user=nimojs&repo=handlebarsjs.org&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="131" height="30"></iframe> @@ -40,19 +40,22 @@ var template = Handlebars.compile(source); <script class="show"> // 数据 var data = { - "title": "Handlebars 中文网", - "body": "用 Handlebars 抛弃低效率的 HTML 拼接吧！" + title: "My New Post", + body: "This is my first post!" } // 渲染 $(function () { var html = template(data); $("#result,#dom").html(html); - - // 通过 pre 让 textarea 高度自适应，与 Handlebars 无关 - $("#expandingPre").html(Handlebars.escapeExpression(html)); }) </script> +<style> +#expandingPre{ + height: 200px; +} +</style> + <!-- 渲染结果字符 --> <div class="expandingArea"> |