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 相关文章推荐
Maps Javascript
Jan 22 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
Js基础学习资料
Nov 23 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
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中__get()和__set()的用法实例详解
2013/06/04 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
python 获取url中的参数列表实例
2018/12/18 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
会计电算化专业毕业生推荐信
2013/12/24 职场文书
学生偷窃检讨书
2014/09/25 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
交心谈心活动总结
2015/05/11 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
vue3中的组件间通信
2021/03/31 Vue.js