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

Question

在我正在制作的Web应用程序中,我使用经典的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>

现在就可以在body中看到输出结果了

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 );