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 相关文章推荐
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
Highcharts入门之简介
Aug 02 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 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采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
JSON 数据格式详解
2017/09/13 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
Python实现将xml导入至excel
2015/11/20 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python机器学习之随机森林(七)
2018/03/26 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Python加速程序运行的方法
2020/07/29 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
毕业生个人求职信范文分享
2014/01/05 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
驾驶员岗位职责
2014/01/29 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
学会感恩主题班会
2015/08/12 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang