发布于 2017-01-23 09:05:28 | 109 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

jsrender jQuery 模板

jsrender 是下一代的 jQuery 模板，专为高性能的纯字符串渲染而优化，无需 DOM 和其他 jQuery 依赖。

---

这篇文章主要介绍了JsRender for object语法,以实例形式讲述了for Object的用法,需要的朋友可以参考下

本文简要讲述了JsRender for object的基本语法。分享给大家供大家参考。具体如下：
 
JsRender 作为一款JavaScript模版引擎，必不可少的会有循环功能，也就是for，但由于JsRender过于灵活，for竟然可以接受object作为循环对象。

{{for Array}}和{{for Object}}都是允许的，{{for Array}}大家都能理解，就是遍历一个数组，逐个取出每个元素。但{{for Object}}就有点让人匪夷所思了，而且官方文档只是举了个没什么帮助的例子，其他无任何说明。

刚开始小菜以为{{for Object}}的用意是遍历该Object的所有属性，但仔细一想，这个功能{{props Object}}已经实现了，props标签的作用就是遍历Object所有属性，有多少个属性，就循环多少次，每次循环都会有两个隐藏的属性：key,prop，key代表属性名，prop代表属性值，用起来非常方便。

实际上，{{for Object}}并不是循环，它可以理解成进入(Into)，也就是说进入到Object环境中，把当前的上下文设置为Object，类似于Handlebars.js中的with。

举个例子：

data:

  {

    "title": "The A team",

    "members": [

      {

        "name": "Pete",

        "city": "members_city",

        "address": {

          "city": "address_city",

          "city1": "address_city1",

         "city2": "address_city2"

       }

     }

   ]

 }

template markup:

 {{for members}}

   {{for address}}

     <p>.{{:city}}</p>

   {{/for}}

 {{/for}}

result:

 address_city

 

从结果可以看出，虽然members的item下也有city属性，但由于通过{{for address}}进入到了address指向的Object中，{{:city}}直接从address中获取了。

同时，address有三个属性，但结果只输出了一行，证明{{for Object}}是不会循环的，仅仅是切换一下this。

希望本文所述对大家JsRender程序设计的学习有所帮助。