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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
JavaScript经典案例之简易计算器
Aug 24 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
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
python字典排序实例详解
2015/05/20 Python
wxpython实现图书管理系统
2018/03/12 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Carolina Lemke Berlin澳大利亚官网:时尚太阳镜品牌
2019/09/17 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
后勤主管工作职责
2013/12/07 职场文书
合作协议书
2014/04/23 职场文书
广播节目策划方案
2014/05/23 职场文书
机械专业求职信
2014/05/25 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
配置nginx负载均衡
2022/05/06 Servers