Handlebars嵌套及if判断


作为一个新入行没几个月的菜鸟,这些日子写了两个不同的购物车。

对于购物车中物品的显示用到了handlebars这个模块引擎。

开始的时候对这个东西并不是很了解,经过前辈的讲解以及自己查阅的资料。

发现了其实这个东西还是挺好用的,下面就是我遇到的两种情况。

-------------------------------------------

第一种:其实就是简单将购物车中的物品查出来并循环显示出来。

这种情况用handlebars来完成感觉十分方便。

首先我们需要引用插件。

<script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="script/handlebar/1.3.0/handlebars.min.js"></script>
<script type="text/javascript" src="script/handlebar/1.3.0/helpers.js"></script>

//在JS中需要注册一个handlebars模板

//$("#xx-template").html()是jquery语法。

var myTemplate = Handlebars.compile($("#xx-template").html());

//将json对象用刚刚注册的Handlebars模板封装,得到最终的html,插入到table中。

$("#xxlist").html(myTemplate(data));

//html中

显示的地方为

<div id="xxlist">

  循环显示下面id="xx-template"中的东西

<div>

id用来唯一的确定一个模块,type中是固定写法

<script id="xx-template" type="text/x-handlebars-template">

 {{#each data}}

  这里可以写样式,获取字段等等

  获取字段的格式为{{xx}}

  {{/each}}

</script>

-------------------------------------------

 

第二种:

这种相对来说比较复杂,

购物车中需要先把地址信息循环出来,

再在每一条地址信息下循环显示出所对应的商品。

当想要放弃使用Handlebars的时候,

发现了这种嵌套的情况也可以是用的方法。

这种情况第一种循环的方式同上,

但是需要在each中嵌套each,

第二层本身就是一个信息列表,是属于所有的,

我们先在第一层each中遍历了所有地址,

然后再遍历每个地址的商品信息,这样就形成了each嵌套。

这个时候,{{xx}}的方法只能取到当前each中的数据,

如果想在内层each取到上层each的数据,可以使用{{../xx}}

 

-------------------------------------------

延伸扩展

在Handlebars中,if..else功能有严重的不足

这个时候也有很好的解决办法

只需要注册一个比较大小的Helper就可以了。

具体操作如下。

JS中:

var myTemplate = Handlebars.compile($("#xx-template").html());

  //在这里注册一个比较大小的Helper,判断x1是否大于x2

  Handlebars.registerHelper("compare",function(x1,x2,options){

    if(x1>x2){

      //满足条件执行

      return options.fn(this);

    }else{

      //不满足执行{{else}}部分

      return options.inverse(this);

    }

  });

$("#xxlist").html(myTemplate(data));

 

html中

<script id="xx-template" type="text/x-handlebars-template">

 {{#each data}}

   {{#if ...}}

    {{#compare ...}}

 

    {{else}}

 

    {{/compare}}

   {{/if}} 

  {{/each}}

</script>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM