node.js - Client side + Server side templating，感觉不对，如何优化？

Question

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

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

我觉得有点脏，使用两个模板引擎，解析代码两次，如何让它变得更好？

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

更新:在服务器端和客户端使用 jade 是个好主意，但如何分离/指定？渲染模板的哪些部分应该在提供页面时完成，哪些部分将由客户端使用？

Answer 1

Client side + Server side templating 非常好用。当我们在构建一些web apps的时候，我们应该使用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 中编写一些 jade 模板代码？该文档也为我们提供了一种方法。本教程可能会对你有所帮助。

索引. 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 }
      |- }

索引.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 );