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

In the web app I am making, I use the classical Express+Jade to render client pages and also expose some REST API (let's say : "user list API").

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

These client pages use provided API to retrieve "user list" and display it. To display it, I use the handlebars template library once the data is retrieved.

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

It seems a bit dirty to me, using two template engines, parsing the code twice, how to make it better ?

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

Note : I already optimized the thing by sending the initial data within the client page by inserting it a script variable. This variable is then displayed the same way data received by API would be. The API is only used in case of data refresh.

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

UPDATE : using jade both server and client side is a good idea but how to seperate / specify ? Wich part of the rendered template should be done by when serving the page and what part will be used by the client ?

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

3 个解决方案

#1

That's very easy to use Client side + Server side templating.When we are building some web apps,we should use ajax to get some data and use the callback function to deal with it.So we should render these data on the client side.

这很容易使用客户端+服务器端模板。当我们构建一些Web应用程序时,我们应该使用ajax来获取一些数据并使用回调函数来处理它。所以我们应该在客户端呈现这些数据。

The question is how to render them on client side?

问题是如何在客户端呈现它们?

Now We just need a client side jade.js.

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

Follow this document : https://github.com/visionmedia/jade#readme

请遵循以下文档:https://github.com/visionmedia/jade#readme

First

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

Second

$ 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.

Third

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>

Now you can see the output result in the body

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

hello world
this is item
this is item
this is item

After reading this demo I think that you would know how to seperate jade server side and client side.If you can understand which one compile the jade template,then all the questions are easy.

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

Maybe you would have another question now.How to write some jade template codes in *.jade?The document also provide us a way to do it.This Tutorial may help you.

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

#2

Use http://github.com/flatiron/plates template engine which will work both on the client side and server side.

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

#3

A few weeks ago I wrote an npm package for Handlebars templates to share them between client and server. It's pretty basic, but it's been working really well for me so far:

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

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

Edit: I'm separately using "hbs" as the package for server-side rendering. The precompiler just delivers precompiled templates to my public javascripts directory whenever I update my hbs views.

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

#1