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

你可能想尝试使用节点：

https://www.npmjs.com/package/ng-node-compile

Answer 2

Airbnb released一个名为Rendr的库，可让您呈现Backbone应用服务器端。

Answer 3

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

Answer 4

Angular 4+现在Angular Universal，允许使用Angular 2+开发的SPA在客户端或服务器端（使用NodeJ甚至Asp.Net Core）进行渲染。棘手的是依赖于window，sessionStore，localStore等的ANYTHING将不会在服务器端执行，因为服务器端环境中没有浏览器。因此，如果您开发SPA并计划在服务器端进行渲染以成为SEO友好，请记住这一点。

React和VueJs也是可用于通用应用程序的框架/库（在服务器端呈现并将已呈现的内容提供给浏览器）

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

4 个答案: