JsRender for object语法简介


Posted in Javascript onOctober 31, 2014

本文简要讲述了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程序设计的学习有所帮助。

Javascript 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
JsRender for index循环索引用法详解
Oct 31 #Javascript
javascript常用函数归纳整理
Oct 31 #Javascript
让html页面不缓存js的实现方法
Oct 31 #Javascript
js读取cookie方法总结
Oct 31 #Javascript
jQuery获取对象简单实现方法小结
Oct 30 #Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 #Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 #Javascript
You might like
多重?l件?合查?(二)
2006/10/09 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
PHP实现递归的三种方法
2020/07/04 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
python多线程操作实例
2014/11/21 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
python下载的库包存放路径
2020/07/27 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
可靠的数据流传输TCP
2016/03/15 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
医药大学生求职简历的自我评价
2013/10/17 职场文书
工程监理应届生求职信
2013/11/09 职场文书
大学生自我鉴定
2013/12/08 职场文书
档案检查欢迎词
2014/01/13 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
高中教师个人总结
2015/02/10 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
丧事主持词
2015/07/02 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
Python借助with语句实现代码段只执行有限次
2022/03/23 Python