Js模版引擎handlebars.js实用教程——目录

Js模版引擎handlebars.js实用教程——目录

        工作中，项目中很多应用的API都是返回的json类型数据，通过阅读项目代码，发现前端设计人员通常都是使用 Jquery-Ajax方法调用相应的api获取Json数据，然后在js中处理和遍历json数据并拼接html的技术来实现页面的动态效果。这种展现方法的最大弊端就是代码凌乱，难易维护。于是我开始网上去找类似与模板引擎的解决方案，找到了下面的博文，写得非常好，也解决了我的实际问题。在此对博文原作者表示感谢。

 

*************************************************************以下为转载的博文***********************************************************************************

         Json+ajax+拼html这种方法的基本思路是：基于ajax请求，要求服务器端返回一个json类型的json字符串，这个json串中包含了界面所需的所有信息，界面拿到json串后，构造出html，完成界面展示。 但是这种通过在javascript代码中拼接html的方式，导致页面中写了大量html+=”<div>”;，这种写法使页面变得非常凌乱，几乎不可以维护。

下面一段示例代码，排版即非常的糟糕，更别说维护的难度了，后来的程序员肯定不愿意维护类似这样的代码。

var contractTextHtml="";
$.each(jsonObject.cl,function(i,n){
  
  contractTextHtml="";
  
  //插入合同文本数据
  contractTextHtml+="<div title='出借人信息---"+hiddenNull(n.cm.lenderName)+"' style='overflow:auto;padding:5px;'>";
  contractTextHtml+="<table class='ui-table ui-table-noborder'>";
  contractTextHtml+="<tbody>";
  contractTextHtml+="<tr><td>合同编号：</td><td><p>"+hiddenNull(n.cm.contractId)+"</p></td></tr>";
  contractTextHtml+="<tr class='ui-table-split'><td>出借人姓名：</td><td><p>"+hiddenNull(n.cm.lenderName)+"</p></td></tr>";
  contractTextHtml+="<tr><td>出借人证件类型：</td><td><p>"+hiddenNull(n.cm.lenderIdType)+"</p></td></tr>";
  contractTextHtml+="<tr class='ui-table-split'><td>出借人证件号：</td><td><p>"+hiddenNull(n.cm.lenderIdNum)+"</p></td></tr>";
  contractTextHtml+="<tr><td>出借金额：</td><td><p>"+hiddenNull(n.cm.lenderAmount)+"</p></td></tr>";
  contractTextHtml+="<tr class='ui-table-split'><td>出借人编号：</td><td><p>"+hiddenNull(n.cm.lenderNo)+"</p></td></tr>";
  contractTextHtml+="<tr><td>出借人银行帐号：</td><td><p>"+hiddenNull(n.cm.lenderBankAccount)+"</p></td></tr>";
  contractTextHtml+="<tr class='ui-table-split'><td>撮合编号：</td><td><p>"+hiddenNull(n.cm.makeMatchNo)+"</p></td></tr>";
  contractTextHtml+="</tbody>";
  contractTextHtml+="</table>";
  contractTextHtml+="</div>";
  $("#textList").append(contractTextHtml);
});

         造成这种问题的根本原因在于拼接html打乱了html原有的层次结构，看不出来哪里是哪里，没有了层次结构的代码，堆在那里就像是一坨垃圾。

         struts2标签或者freemarker标签的优点是能够保持html原有格式，js构造html优点是速度快省资源，为什么我们不能把二者的优点结合在一起呢？这就是Handlebars.js。

         既然要在项目中引入js模版引擎，就必须进行技术选型，严格考核之后，才可以引入，就好像是木桶效应，不能让他成为项目中的短板。

         Handlebars.js是一款基于Jquery的插件，以json对象为数据源，支持逻辑判断、循环等操作，同时具有非常好的扩展性，体积60KB左右，经过仔细的分析研究，这是一款不可多得的js模版引擎。下文并不是Handlebars.js基础教程，而是注重于实际应用，为读者阐述使用过程中可能会遇到的一些问题。

     实际上，写这篇文章，很大程度是因为关于这个插件的中文资料比较少，新手难以快速使用。

                     目录：

                                           一、为什么选择Handlebars.js？

                                          二、如何引入Handlebars.js？

                                          三、each-基本循环使用方法。

                                          四、each-循环中使用this。

                                          五、with-进入到某个属性(进入到某个上下文环境)。

                                          六、with-终极this应用。

                                          七、if-判断的基本用法。

                                          八、由于if功力不足引出的Helper。

                                          九、另一种Helper用法。

                                          十、关于HTML编码。

                                          十一、结束语。 

                                          Demo打包下载：下载地址

转载自：http://www.cnblogs.com/iyangyuan/p/3471227.html