6

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

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

对我来说似乎有点脏，使用两个模板引擎，两次解析代码，如何使它更好？

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

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

4

3 回答 3

4

使用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

!!!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 );
于 2012-12-19T07:12:00.170 回答
1

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

于 2012-04-17T09:55:52.633 回答
1

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

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

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

于 2012-04-23T20:56:03.263 回答