Pure JS (5.2)：服务器端与客户端共用页面渲染代码
Pure JS (5.2)：服务器端与客户端共用页面渲染代码
接着上一篇文章，我们来谈谈如何在服务器端和客户端共用 JS 代码，以便实现第一次返回页面时在服务器端完成初始渲染，而之后的操作在客户端进行修改并重新渲染页面的模式。
运行示例
首先，需要先运行mongod；然后下载附件中的 PureJS 工程，解压后加载到 eclipse 中，打开文件 main/com/purejs/core/JSServer.java，右键选择 Run As -> Java Application。
在浏览器中输入 http://localhost:8080， 可以看到如下页面：
【content-tmpl】：包含表格的列标题和最后一行（用于增加 user ）。
【user-tmpl】：表格的一行，包含 user 数据。
【data-tmpl】：用于在服务器端将 users 数据输出到客户端。
渲染函数
在 webapp/js/both/views.js 中，我们可以看到如下代码：
$(function(){bind();// 每次修改数据时重新排序并渲染页面、绑定事件function show() {sort();views.index($, users);bind();}function sort() {// users 重新排序，略}// 绑定事件function bind() {var rows = $("#content tr[index] a"),last= $("#content tr:last a");rows.filter(":even").click(update);rows.filter(":odd").click(remove);last.eq(0).click(add);last.eq(1).click(clear);}// 增加 user ，需要重新排序和渲染function add() {var $input = $(this).parent().parent().find("input"),$name = $input.eq(0),$desc = $input.eq(1),name = $name.val(),desc = $desc.val();// 数据验证，略var user = { name: name, desc: desc };users.push(user);save(user);}function clear() {// 清空数据，略}// 修改 user ，需要重新排序和渲染function update() {var $tr = $(this).parent().parent(),$desc = $tr.find("input"),index = $tr.attr("index"),desc = $desc.val();// 数据验证，略var user = users[parseInt(index)];user.desc = desc;save(user);}// 删除 user ，需要重新排序和渲染，并发送请求function remove() {var $tr = $(this).parent().parent(),index = $tr.attr("index");$tr.remove();var name = users.splice(index, 1)[0].name;show();pure.post({ action: "users.remove", params: name });}// 在增加或保存修改 user 时调用，重新排序和渲染，并发送请求function save(user) {show();pure.post({ action: "users.save", params: user });}});