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 相关文章推荐
Seajs的学习笔记
Mar 04 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
基于JS实现一个随机生成验证码功能
May 29 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获得当前的脚本网址
2007/12/10 PHP
两个php日期控制类实例
2014/12/09 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
[JS]点出统计器
2020/10/11 Javascript
JQuery live函数
2010/12/24 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
js转换对象为xml
2017/02/17 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
使用graphics.py实现2048小游戏
2015/03/10 Python
Django csrf 验证问题的实现
2018/10/09 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python面试题小结附答案实例代码
2019/04/11 Python
python 如何将office文件转换为PDF
2020/09/22 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
使用索引有什么好处
2016/07/27 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
物业工作计划书
2014/01/10 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
《识字五》教学反思
2014/03/01 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
员工给公司的建议书
2019/06/24 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL