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 相关文章推荐
Javascript的常规数组和关联数组对比小结
May 24 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
JavaScript 函数的执行过程
May 09 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 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
记录mysql性能查询过程的使用方法
2013/05/02 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
使用python实现简单五子棋游戏
2019/06/18 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
女大学生毕业找工作的自我评价
2013/10/03 职场文书
建筑个人求职信范文
2014/01/25 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
本溪关门山导游词
2015/02/09 职场文书
学期个人自我总结
2015/02/13 职场文书
2015年市场部工作总结
2015/04/30 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python