for object使用

1.为进入object中直接使用其中的属性

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">

<div>

  {{:name}} lives in

  {{for address}}

    <b>{{>city}}</b>

  {{/for}}

</div>

</script>

<script>

var data = [

  {

    "name": "Pete",

    "address": {

      "city": "Seattle"

    }

  },

  {

    "name": "Heidi",

    "address": {

      "city": "Sidney"

    }

  }

];

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);

</script>

2.切入模版

<body>

<script id="peopleTemplate" type="text/x-jsrender">

  <div>

    {{:name}} lives in {{for address tmpl="#addressTemplate" /}}<!--切入其他模版-->

  </div>

</script>

<script id="addressTemplate" type="text/x-jsrender">

  <b>{{>city}}</b>

</script>

<div id="result"></div>

<script>

var people = [

  {

    "name": "Pete",

    "address": {

      "city": "Seattle"

    }

  },

  {

    "name": "Heidi",

    "address": {

      "city": "Sidney"

    }

  }

];

var html = $("#peopleTemplate").render(people);

$("#result").html(html);

</script>

</body>

2.for array的使用，为循环标签

<body>

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">

<b>{{:title}}</b>

<ul>

  {{for members}}

      <li>{{:name}} lives in <b>{{:address.city}}</b></li>

  {{/for}}

</ul>

</script>

<script>

var data = {

  "title": "The A team",

  "members": [

    {

      "name": "Pete",

      "address": {

        "city": "Seattle"

      }

    },

    {

      "name": "Heidi",

      "address": {

        "city": "Sidney"

      }

    }

  ]

};

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);

</script>

</body>

3.for标签还支持else的判断

else：表示for中的没有值循环或者为空，则进入

{{for members}}

    Name: {{:name}}

{{else}}

    No members...

{{/for}}

Conditional blocks: — Render the block content of the {{for}} tag (or referenced template) if the object is defined and is not an empty array, otherwise render the {{else}} block (or template)

<body>

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">

<b>{{:title}}</b>

<ul>

  {{for members}}

    <li><b>Name:</b> {{:name}}</li>

  {{else}}

    <li>No members!</li>

  {{/for}}

</ul>

</script>

<script>

var data = [

  {

    "title": "The A team",

    "members": []

  },

  {

    "title": "The B team",

    "members": [

      {

        "name": "Pete"

      }

    ]

  }

];

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);

</script>

</body>

jsrender for 标签的更多相关文章

  1. MVC学习笔记3 - JsRender

    许多发展平台减少代码和简化维护,使用模板和 HTML5 和 JavaScript 也不例外. JsRender 是一个 JavaScript 库使您可以一次定义一个样板文件结构,并使用它来动态地生成 ...

  2. 前端渲染利器——JsRender入门

    JsRender不少前端人员应该都用过,它是一个比较强大的模板,不牵涉太多技术依赖,使用起来非常舒服.我本人在前端开发中使用React之前,都是用的它了(实际上我感觉React没有JsViewes好用 ...

  3. knockoutJS学习笔记02：jsRender模板引擎

    上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRe ...

  4. Visro 应用的前端模板工具介绍 -JsRender

    1.什么是JsRender: JsRender是一款JavaScript模版引擎,是具有简单直观,功能强大,可扩展的,早期版本是基于JQUERY 写的,后来作者重构了,就不再依赖JQUERY了. 它的 ...

  5. JsRender for object 语法说明

    JsRender 作为一款JavaScript模版引擎,必不可少的会有循环功能,也就是for,但由于JsRender过于灵活,for竟然可以接受object作为循环对象. {{for Array}}和 ...

  6. JsRender实用教程(tag else使用、循环嵌套访问父级数据)

    前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...

  7. 下一代Jquery模板-----JsRender

    在ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender中提到了JsRender.JsRedner和JsViews(JsViews是再JsRender基础 ...

  8. ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender

    (原文) 昨天在ASP.NET MVC利用PagedList分页(一)的 最后一节提到,一个好的用户体验绝对不可能是点击下一页后刷新页面,所以今天来说说利用Ajax+PagedList实现无刷新(个人 ...

  9. JsRender

    JsRender 不少前端人员应该都用过,它是一个比较强大的模板,不牵涉太多技术依赖,使用起来非常舒服.我本人在前端开发中使用React之前,都是用的它了(实际上我感觉React没有JsViewes好 ...

随机推荐

  1. java 22 - 23 多线程之定时器的概述和使用例子

    定时器是一个应用十分广泛的线程工具,可用于调度多个定时任务以后台线程的方式执行. 在Java中,可以通过Timer和TimerTask类来实现定义调度的功能 开发中 Quartz是一个完全由java编 ...

  2. WIN7下强制分第四个主分区的方法

    通过磁盘管理的界面方式, 第四个分区会被分成扩展分区, 建议通过命令行 打开命令行运行diskpart, list disk 会列出所有磁盘, 选择要操作的磁盘序号如1,select disk 1 如 ...

  3. Castle IOC容器与Spring.NET配置之比较

    我本人对于Spring.NET并不了解,本文只是通过一个简单的例子来比较一下两者配置之间的区别.在Castle IOC容器中,提出了自动装配(Auto-Wiring)的概念,即由容器自动管理组件之间的 ...

  4. 表单 - Form - 无刷新提交原理

    为什么Form组件的表单提交可以做到无刷新? EasyUI在提交的时候,将表单作为一个隐藏的iframe进行的提交,并不是我们看到的那个表单进行的提交 并且那个iframe使用了绝对定位,保证页面上不 ...

  5. ISAPI_Rewrite中文手册

    参考:http://blog.csdn.net/fanxiaojie119/article/details/5353186 第一章:软件介绍ISAPI_Rewrite 是一款适用于IIS的功能强大的基 ...

  6. 重构Web Api程序(Api Controller和Entity) 续篇(2)

    一代好的程序,是几经修改与重构出来的.有关此篇Insus.NET对前面所在修改与重构,还是没有觉得很完美简洁.特别对是存在的json文件进行修改或是删除时,我们原先是从文件读取数据,修改或是删除数据, ...

  7. struts2: 玩转 rest-plugin

    近期使用struts2的rest-plugin,参考官方示例struts2-rest-showcase,做了一个restful service小项目,但官网提供的这个示例过于简单,埋下了巨坑无数,下面 ...

  8. 【自己给自己题目做】：如何在Canvas上实现魔方效果

    最终demo -> 3d魔方 体验方法: 浮动鼠标找到合适的位置,按空格键暂停 选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...

  9. .Net简单图片系统-使用说明

    使用说明 1. 从github上获取代码,并部署到IIS中,应用程序池选择4.0. 2. 打开配置文件,在AppSettings中,设置SaveMode模式,如果选择的Distributed模式,需要 ...

  10. WebHeaderCollection 类

    https://msdn.microsoft.com/zh-cn/library/system.net.webheadercollection(v=VS.95).aspx /// <summar ...