在构建 Web 应用的过程中,一个常见的场景是,我们搜集数据之后,再使用 Javascript 来将这些数据按设想的方式呈现到页面上。
首先提供两个链接:jQuery.render 在 Github 上开源的页面jQuery.render 文档

让我们考虑一个搜索结果,用于呈现使用“幸福”搜索得到的结果。  

百度搜索_幸福_搜索结果

首先,请仔细观察上图中的条目,不难发现其实每条搜索结果的构造都可以用如下伪代码来描述:

1 <a href=resultLink>resultTitle</a>
2 resultDescription
3 resultSourceURL resultDate - 百度快照

什么? 搜索关键字的着色?其实这个过程放到前端来搞也无妨:

1
resultDescription.html = resultDescription.html.replace( /keyword/g, '<red>keyword</red>');

整个过程大体是这样的:

  1. 通过搜索数据库获得搜索结果对象( SearchResult )集
  2. 通过服务器脚本(ASP.NET 或者 PHP)支持的方式重复某一段 HTML 片断
  3. 最终客户端收到完整的列表的 HTML 代码并重现为列表。

对于重复的数据呈现,在 ASP.NET WebForm 中有 Repeater 控件可供使用。Repeater 和其他众多数据绑定控件一样好用:

  • 在页面中放置一个 Repeater 控件 repeater1
  • 在 repeater1 中利用其支持的语法(即 asp.net 原生语法和数据绑定语法)编写模板
  • 在后台代码(CodeBehide)中获取要呈现到 repeater1 上的数据 data
  • 将数据绑定到 repeater1 上

可以看出,ASP.NET 的 Repeater 控件大体上也是做了前述呈现数据的三个部分的工作。
当我们离开了 WebForm,当我们的数据可以轻而易举地获取到的时候,比如当下,那我们还需要做什么?当数据准备好了当然是视图!

我不得不再一次提到 Ajax 了。在这个 Ajax 横行的时代,似乎如果你不用,你的应用就落后了似的。这当然不是我要宣扬的观点,不过我确实支持适当的异步编程在大多数确实能大大提高用户体验的观点。在异步编程过程中,我们可以轻而异举地获取到任意数据(我所在的团队曾经做过一个项目用来随意获取和更新整个系统中的任意数据!这个项目最终成为我们产品中一个亮点),但接下来视图的过程似乎却没有 Winform 时代那么爽了。

不过,不需要担心,我正在为您介绍的 jQuery.render 就是在这时候用来帮助你搭建视图的得力引擎。

jQuery.render 是一个用于前端页面的 jQuery 插件,它可以根据指定的模板和数据来呈现出 HTML 视图。jQuery.render 可以自动处理包括集合、JSON 对象在内的各种数据,内建 Ajax 支持,具有完善的事件体系,供您自由使用与定制。同时 jQuery.render 是完全开源的自由软件,您可以按您的需要自行修改和使用,甚至您还可以在 github 上向我将您的更改提交给我,以便与我一同改善这个项目,从而让更多人得益。

好,先睹为快,我们先看一个示例吧:

<div id=“target”></div>

<script type=“text/javascript”>
var foo = { // 定义数据

name: Jack,
word:
Hello Tom, how is everything?
};
var tmpl = <?= name ?>says, “<?= word ?>// 定义模板

1
jQuery(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">#target</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">).render( foo, tmpl );                <span style="color: #008000;">// 立即呈现</span>  

</script>

通过以上调用,您将可以直接得到以下 HTML 视图(着色部分为突出显示,实际效果为纯代码):

<div id=“target”> Jack says, “Hello Tom, how is everything?</div>

 

我想,您比我更了解自己的需求,也更了解您正需要什么样的工具来帮助你实现这些需求。
在接下来的文章里,我将逐步介绍 jQuery.render 的使用方法建议,希望对您有用。
如果想直接阅读插件文档,请点击这里

 本文原始地址:https://blog.jijiechen.com/post/using-jquery-render-to-bind-your-web-interface.aspx
欢迎转载,如果需要同原作者 ciznx 交流,请点此链接回到原来页面

nd-your-web-interface.aspx “回到文章原始地址”)。