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

在我制作的网络应用程序中，我使用经典的Express + Jade渲染客户端页面，并且还公开了一些REST API（比如说：“用户列表API”）。客户端+服务器端模板，对我感觉不对，如何优化？

这些客户端页面使用提供的API检索“用户列表”并显示它。为了显示它，我一旦检索到数据就使用句柄模板库。

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

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

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

来源

2012-04-17 Arnaud Rinquin

您可以使用玉模板[浏览器]（https://github.com/visionmedia/jade#a4）。还有很多其他的模板引擎可以在Node和浏览器中使用。 – 2012-04-17 11:07:51

我知道玉可以用于客户端和服务器端，但如何分离文件中的客户端和服务器端模板？你如何告诉服务器端Jade处理器不要计算模板的客户端部分？ – 2012-04-17 11:13:38

我不能告诉你如何组织你的模板，我解决这个问题的方式是尽可能保持模板简单，并在服务器和客户端使用相同的模板。布局只能在服务器上呈现，而部分（资源模板）可以呈现在合理的位置。 – 2012-04-17 11:42:37

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

阅读本演示中，我认为你应该知道如何单独玉服务器端和客户端后side.If你可以了解哪一个编译玉模板，那么所有的问题都很容易。

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

来源

2012-12-19 07:12:00

我应该尽可能使用'text/template'类型的脚本标记。这个答案实际上比我的自动答案好一点。 – 2012-12-19 23:15:04

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

来源

2012-04-17 09:55:52

板块似乎不太容易与express结合，我不想在flatrion上重写我的应用（重写是问题，而不是flatiron）。 – 2012-04-17 11:41:26

你可以在快递板上写插件来模仿玉器。那么把它与快递 – 2012-04-17 13:05:58

结合不会有什么大问题，但是它无法解决我的问题，我也会遇到和客户端和服务器端都有玉石一样的问题：如何使客户端和客户端之间完全分离服务器模板？ – 2012-04-17 13:13:37

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

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

编辑：我分别使用“哈佛商学院”作为包服务器端渲染。只要我更新我的hbs视图，预编译器就会将预编译好的模板提供给我的公共javascripts目录。

来源

2012-04-23 20:56:03

以前没有注意到你的答案，真的很有趣！ – 2012-12-12 13:55:34

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

回答

相关问题