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 相关文章推荐
jquery放大镜效果超漂亮噢
Nov 15 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
JS解析XML实例分析
Jan 30 Javascript
jquery实现倒计时效果
Dec 14 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
php中文件上传的安全问题
2006/10/09 PHP
第二节--PHP5 的对象模型
2006/11/16 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Python 3.x 新特性及10大变化
2015/06/12 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python学习入门之区块链详解
2017/07/25 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
python如何删除列为空的行
2020/07/17 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
上课看小说检讨书
2014/02/22 职场文书
职业女性的职业规划
2014/03/04 职场文书
公司联欢会策划方案
2014/05/19 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书