Handlebars 通过JavaScript对view和data的分离来快速构建Web模板

说明：

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。

官网：

http://handlebarsjs.com/

自己的代码：

采用leancloud技术请求数据

// 界面显示的数组var context = {  products: []};// 请求列表数据function setupData() {  // LeanCloud - 查询  var query = new AV.Query('Course');  query.descending('createdAt');  query.find().then(function (products) {    products.forEach(function(product) {      var id = product.id;      var title = product.get('title');      var description = product.get('description');      var type = product.get('type');      // handlebars 数组展示的context      context.products.push({        id,        title,        description,        type,      });    });    // 使用 handlebars 框架来更新 html    var source = $("#products-list").html();    var template = Handlebars.compile(source);    var html = template(context);    $('#products-detail').html(html);  }).catch(function(error) {    alert(JSON.stringify(error));  });};// function logout() {//   AV.User.logOut();//   window.location.href = "./../login/login.html";// };//加载页面时候加载$(function() {  //if (isCurrentUser()) {    setupData();  //} else {  //  window.location.href = "./../login/login.html";  //}});//跳转新页面function goToNewWeb(type, id) {  if(type == "url") {    window.open('detail-url.html#' + id,'_blank')  }  if(type == "article") {    window.open('detail-article.html#' + id,'_blank')  }}

html

<!-- body -->                <section class="panel panel-info portlet-item m-t">                  <header class="panel-heading">                    型宠 - 修剪教程 - 列表                  </header>                  <div class="row wrapper" id="products-detail">                    <!-- Products list content use Handlebars -->                    <script id="products-list" type="text/x-handlebars-template">                      {{#each products}}                      <div class="col-sm-6 col-md-4 product-detail" onclick="goToNewWeb('{{{type}}}','{{{id}}}')">                        <div class="thumbnail">                          <div class="caption">                            <h3>{{{title}}}</h3>                            <p>{{{description}}}</p>                            <p>{{{type}}}</p>                          </div>                        </div>                      </div>                      {{/each}}                    </script>                  </div>                </section>                <!-- /.body -->