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 注意事项 与原因分析
Apr 24 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
react使用CSS实现react动画功能示例
May 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
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
python二分查找算法的递归实现方法
2016/05/12 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
python中upper是做什么用的
2020/07/20 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
竞选演讲稿范文
2013/12/28 职场文书
办公室岗位职责
2014/02/12 职场文书
党员自评材料范文
2014/12/17 职场文书
作文评语集锦
2014/12/25 职场文书
跳高加油稿
2015/07/21 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL