如何提供预渲染的数据可绑定模板

Question

现在有很多数据绑定客户端框架(Ember,Backbone,Knockout和Angular是我所知道的流行的框架).

所有这些框架的问题是初始加载.您必须使用占位符标记HTML,并且根据其完成方​​式,客户端将看到空页面块或随机{{ markup }}.此外,大多数这些模板都是在客户端解析的,而不是预编译的.

理想情况下,当用户第一次访问该站点时,他们将被提供一些预先呈现的HTML,其中填入了所有数据,这将使他们在所有预编译的JavaScript模板加载和数据绑定时看到它们.起作用.从那时起,它将使用客户端路由,我们将只有线上的JSON.

我已经可以使用Jade或其他一些可以呈现服务器或客户端的模板语言来完成其中的一半.我无法弄清楚的是我如何能够很好地使用其中一个框架.

例如,在Knockout中,您的视图可能如下所示:

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

在Jade中,我会定义相同的模板:

p First Name 
  b= firstName
p Last Name 
  b= lastName

对于好奇的人来说,编译到这个:

function anonymous(locals) {
    var buf = [];
    var locals_ = locals || {}, firstName = locals_.firstName, lastName = locals_.lastName;
    buf.push("<p>First Name <b>" + jade.escape(null == (jade.interp = firstName) ? "" : jade.interp) + "</b></p><p>Last Name <b>" + jade.escape(null == (jade.interp = lastName) ? "" : jade.interp) + "</b></p>");
    return buf.join("");
}

哪种服务器端或客户端都可以快速呈现.

但是,要使数据绑定起作用,我必须加倍注释源:

p(data-bind='text: firstName') First Name 
  b= firstName
p(data-bind='text: lastName') Last Name 
  b= lastName

即,将每个占位符变量放在那里两次,采用两种不同的格式.

(幸运的是,大多数这些框架都为视图模型采用某种JSON对象(我相信),我可以直接向Jade或框架提供服务,因此该部分不应成为问题.)

我非常想避免这种情况,但如果不编写自己的模板语言,我就无法想到如何实现这一点,而这种语言对前端框架有很强的依赖性.

有没有办法在没有太多痛苦的情况下做到这一点？使用上述任何前端或任何JS兼容的模板语言？也许通过一些插件/扩展而不是必须在核心级别重新定义它？

Answer 1

Facebook 的ReactJS实现了一个虚拟 DOM，可让您在服务器端（在 Node 中）渲染整个 UI。