diff options
| author | nimojs <imhadley@163.com> | 2015-04-19 23:14:19 +0800 |
|---|---|---|
| committer | nimojs <imhadley@163.com> | 2015-04-19 23:14:19 +0800 |
| commit | cbaf08642e63b1dc50b99ba5ac41ea1ecc4b7163 (patch) | |
| tree | 2d2d55cfbd5e9b89a99223d2e30037ed4ba14cae /demo/execution-1.html | |
| parent | 720cb5a6ba938cb9864bd24d6df5527b5cdbfa91 (diff) | |
| download | handlebarsjs.org-master.zip handlebarsjs.org-master.tar.gz handlebarsjs.org-master.tar.bz2 | |
增加章节，静态资源文件目录调整
Diffstat (limited to 'demo/execution-1.html')
| -rw-r--r-- | demo/execution-1.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/demo/execution-1.html b/demo/execution-1.html new file mode 100644 index 0000000..c5f2147 --- /dev/null +++ b/demo/execution-1.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <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> + <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>{ 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> + </span> + </h1> + </div> + <div class="ui-box"><!-- ui-box Start --> + 建议将此页面保存至本地修改相关代码以帮助理解，与本示例相关的文档：<a href=""></a> + +<script id="entry-template" type="text/x-handlebars-template" class="show"> +<!-- 模板 --> +<div class="entry"> + <h1>{{title}}</h1> + <div class="body"> + {{body}} + </div> +</div> +</script> + +<script class="show"> +// 编译模板 +var source = $("#entry-template").html(); +var template = Handlebars.compile(source); +</script> + +<script class="show"> +// 数据 +var data = { + title: "My New Post", + body: "This is my first post!" +} +// 渲染 +$(function () { + var html = template(data); + $("#result,#dom").html(html); +}) +</script> + +<style> +#expandingPre{ + height: 200px; +} +</style> + + +<!-- 渲染结果字符 --> +<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 |