客户端+服务器端模板，感觉不对，怎么优化？

Question

在我正在制作的网络应用程序中，我使用经典的 Express+Jade 来呈现客户端页面并公开一些 REST API（比方说：“用户列表 API”）。

这些客户端页面使用提供的 API 来检索“用户列表”并显示它。为了显示它，我在检索到数据后使用车把模板库。

对我来说好像有点脏，用了两个模板引擎，两次解析代码，怎样才能更好？

注意：我已经通过在客户端页面中插入一个脚本变量来发送初始数据来优化这个东西。然后，此变量的显示方式与 API 接收的数据相同。该 API 仅用于数据刷新的情况。

更新：在服务器端和客户端都使用jade是个好主意，但是如何分开/指定呢？渲染模板的哪一部分应该在服务页面时完成，客户端将使用哪一部分？

Answer 1

使用http://github.com/flatiron/plates 模板引擎，它可以在客户端和服务器端工作。

Answer 2

几周前，我为 Handlebars 模板编写了一个 npm 包，以便在客户端和服务器之间共享它们。这是非常基本的，但到目前为止对我来说效果很好：

https://github.com/jwietelmann/node-handlebars-precompiler

编辑：我单独使用“hbs”作为服务端渲染的包。每当我更新我的 hbs 视图时，预编译器只会将预编译的模板传递到我的公共 javascripts 目录。

Answer 3

很容易使用Client端+Server端模板。当我们在构建一些web应用程序时，我们应该使用ajax来获取一些数据并使用回调函数来处理。所以我们应该在客户端渲染这些数据一边。

问题是如何在客户端渲染它们？

现在我们只需要一个客户端jade.js。

关注此文档：https://github.com/visionmedia/jade#readme

第一

git clone https://github.com/visionmedia/jade.git

第二

$ make jade.js ( in fact the project has already compile the file for us )

so we just need to copy this file to the path that we use.

第三

read my demo below :

<script type='text/javascript' language='javascript' src="lib/jquery-1.8.2.min.js"></script>
<script type='text/javascript' language='javascript' src="lib/jade/jade.js"></script>
<script type='template' id='test'>
ul
  li hello world 
  li #{item}
  li #{item}
  li #{item}
</script>
<script>
  var compileText = $("#test").text();
  console.log( typeof( compileText ) );
  var fn = jade.compile( compileText , { layout : false } );
  var out = fn( {item : "this is item " } );
  console.log( out );
  $("body").append( out );
</script>

现在可以在正文中看到输出结果了

hello world
this is item
this is item
this is item

看完这个demo，我想你应该知道jade服务器端和客户端是怎么分开的了。如果你能明白是哪一个编译jade模板，那么问题就简单了。

也许您现在还有一个问题。如何在*.jade中编写一些翡翠模板代码？文档也为我们提供了一种方法。本教程可能会对您有所帮助。

index.jade

!!!5
html
  head
   title hello world
  body
    ul#list

    script#list-template(type='template')
      |- for( var i in data )
      |    li(class='list') \#{ data[i].name }
      |- }

index.js

/* you javascript code */
var compileText = $('#list-template').text();
var compile = jade.compile( compileText , { layout : false } );

var data = [{ "name" : "Ben" } , {"name" : "Jack" } , {"name" : "Rose" }];
var outputText = compile( data );

$("#list").append( outputText );