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常用排序实现代码
Dec 28 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
js实现右键自定义菜单
Dec 03 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
教你一步步实现一个简易promise
Nov 02 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框架的性能
2008/01/10 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
微信小程序实现下载进度条的方法
2017/12/08 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
python实现代理服务功能实例
2013/11/15 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
光盘行动倡议书
2014/02/02 职场文书
安全大检查实施方案
2014/02/22 职场文书
校园安全标语
2014/06/07 职场文书
团员个人年度总结
2015/02/26 职场文书
总结Python使用过程中的bug
2021/06/18 Python
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
浅谈Node的内存泄露问题
2022/05/06 NodeJs