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资料toString 方法
Mar 13 Javascript
xtree.js 代码
Mar 13 Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 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操作excel文件 基于phpexcel
2010/07/02 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
TensorFlow变量管理详解
2018/03/10 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python列表推导式入门学习解析
2019/12/02 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
会计电算化专业自荐信
2014/03/15 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
表扬稿范文
2015/01/17 职场文书
给医院的感谢信
2015/01/21 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫