Question

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

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

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

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

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

Answer 1

这很容易使用客户端+服务器端模板。当我们构建一些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

阅读本演示后，我想你会知道如何分离玉器服务器端和客户端。如果你能理解哪一个编译玉器模板，那么所有的问题都很容易。

也许你现在还有另外一个问题。如何在* .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 );

Answer 2

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

Answer 3

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

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

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

客户端+服务器端模板，对我来说感觉不对，如何优化？

3 个答案: