我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文档中非常大量的块进行操作呢?这时JS模版就派上用场了。
源地址:http://rfyiamcool.blog.51cto.com/1030776/1278620
这是一个实例,我们可以把json的数据,按照自己的想法嵌入到模板里面。
<!DOCTYPE html> <html> <head> <title>Handlebars Expressions Example</title> </head> <body> <h1>Handlebars Expressions Example!</h1> <!--this is a list which will rendered by handlebars template. --> <div id="list"> </div> <script type="text/javascript" src=\'#\'" /jquery.js"></script> <script type="text/javascript" src=\'#\'" /handlebars-1.0.0.beta.6.js"></script> <script id="people-template" type="text/x-handlebars-template"> {{#people}} <div class="person"> <h2>{{first_name}} {{last_name}}</h2> <div class="phone">{{phone}}</div> <div class="email"><a href="mailto:{{email}}">{{email}}</a></div> <div class="since">User since {{member_since}}</div> </div> {{/people}} </script> <script type="text/javascript"> $(document).ready(function() { // compile our template var template = Handlebars.compile($("#people-template").html()); var data = { people: [ { first_name: "rui", last_name: "fengyun", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" }, { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" }, { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" }, { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" }, { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" } ] }; $('#list').html(template(data)); }); </script> </body> </html>
看到这个例子,大家感觉很爽吧~ 就是这样。。 我们可以通过后端取数据,然后扔到前端,而不用写各种 "" <> ''的分离符号。
进行遍历里面的数据,print出来
<script id="each-template" type="text/x-handlebars-template"> {{#each people}} ... output person's info here... {{/each}} </script>
有数据的话,进行数据渲染
<script id="each-template" type="text/x-handlebars-template"> {{#if people}} ... output person's info here... {{/if}} </script>
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索handlebars的使用
, 数据
, com
, handlebars express
, test
, phone
, email
, handlebars
express模板引擎
handlebars模板引擎、javascript 模板引擎、handlebars 模板、handlebars 子模板、handlebars 模板嵌套,以便于您获取更多的相关知识。