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特效
Aug 13 Javascript
一些实用性较高的js方法
Apr 19 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
JS原型与继承操作示例
May 09 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
浅析JavaScript 函数柯里化
Sep 08 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 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语法(1)
2006/10/09 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
django实现用户登陆功能详解
2017/12/11 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
人事助理岗位职责
2013/11/18 职场文书
学雷锋标语
2014/06/25 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript