【发布时间】：2014-01-02 01:03:21
【问题描述】：
现在有很多数据绑定客户端框架（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 可编译的模板语言？也许通过一些插件/扩展而不是必须在核心级别重新定义它？
【问题讨论】：