ITPub博客

首页 > 应用开发 > Javascript > JsRender for object 语法说明!

JsRender for object 语法说明!

原创 Javascript 作者:无畏前端 时间:2020-08-13 21:52:55 0 删除 编辑

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:

 1 {
 2   "title": "The A team",
 3   "members": [
 4     {
 5       "name": "Pete",
 6       "city": "members_city",
 7       "address": {
 8         "city": "address_city",
 9         "city1": "address_city1",
10         "city2": "address_city2"
11       }
12     }
13   ]
14 }

template markup:

1 {{for members}}
2   {{for address}}
3     <p>.{{:city}}</p>
4   {{/for}}
5 {{/for}}

result:

1 address_city

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

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

最后:

在学习web前端的过程中,难免会遇到很多的问题,这些问题可能会困扰你许久,为此我有个web开发学习交流群(  545667817 ), 里面都是  ITPUB  的小伙伴,并整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS 到移动端HTML5的项目实战的学习资料, 想学习的都可以申请加入,大家互相学习,互相交流,共同进步,每日分享不同的学习资料! 


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69980764/viewspace-2711610/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-08-01

  • 博文量
    22
  • 访问量
    7119