基于jQuery的JavaScript模版引擎JsRender使用指南

前端之家收集整理的这篇文章主要介绍了基于jQuery的JavaScript模版引擎JsRender使用指南前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_5020@前言


@H
5020@ JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点:


@H
5020@ · 简单直观


@H
502_0@ · 功能强大


@H_5020@ · 可扩展的


@H
5020@ · 快如闪电


@H
5020@ 这些特性看起来很厉害,但几乎每个模版引擎,都会这么宣传。。。


@H
5020@ 由于工作需要,小菜才接触到此款模版引擎。使用了一段时间,发现它确实比较强大,但小菜觉得有些地方强大的过头了,反倒让人觉得很难理解。


@H
5020@ 另一方面,JsRender的官方文档比较详细,但其他资料出奇的少,遇到点什么问题,基本搜不到,不仅仅是相关问题搜不到,几乎就是没有结果。


@H
502_0@ 再加上JsRender有些地方确实是不好理解,所以急需小菜分享一些“最佳实践”。


@H_5020@ 基于最近一段时间的使用,小菜总结了一些实用经验,当然,这些经验在官方文档上是找不到的。


@H
502_0@ 注意:本文不是基础入门教程,以下例子中自带注释,不做过多说明,读者自行体会,不懂的地方可以留言。


@H_5020@

嵌套循环使用#parent访问父级数据(不推荐)


@H
502_0@<div class="codetitle"><a style="CURSOR: pointer" data="41151" class="copybut" id="copybut41151" onclick="doCopy('code41151')"> 代码如下:
<div class="codebody" id="code41151">
<!DOCTYPE html>

<Meta charset="utf-8"> 嵌套循环使用#parent访问父级数据 --- by 杨元

@H_502_0@

嵌套循环使用参数访问父级数据(推荐)

@H_502_0@
代码如下:
<Meta charset="utf-8"> 嵌套循环使用参数访问父级数据 --- by 杨元

@H_502_0@

自定义标签(custom tag)中使用else(强烈不推荐)

@H_502_0@
代码如下:
<Meta charset="utf-8"> <a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>中使用else --- by 杨元
名称

@H_502_0@

用helper代替自定义标签(推荐)

@H_502_0@
代码如下:
<Meta charset="utf-8"> 用helper代替<a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a> --- by 杨元
名称

@H_502_0@演示代码打包下载:

原文链接:https://www.f2er.com/jquery/56611.html

猜你在找的jQuery相关文章