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判断鼠标同时离开两个div的思路及代码
May 31 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
原生JS中应该禁止出现的写法
May 05 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 URL验证正则表达式
2011/07/19 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
js中日期的加减法
2015/05/06 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
python 正则式使用心得
2009/05/07 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Python中 map()函数的用法详解
2018/07/10 Python
python中scikit-learn机器代码实例
2018/08/05 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
优秀大学生求职自荐信范文
2014/04/19 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python