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 相关文章推荐
用方法封装javascript的new操作符(一)
Dec 25 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
ionic3 懒加载
Aug 16 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 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
example1.php
2006/10/09 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
python自动化测试实例解析
2014/09/28 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年技术部工作总结
2014/12/12 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
交心谈心活动总结
2015/05/11 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
《静夜思》教学反思
2016/02/17 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python