假设我们有以下数据
var data = {
facets: [{
name : "some name",
values: [{
value: "some value"
}]
}]
};
我们可以轻松地将此表示为一个绑定到 knockout 模板的视图模型,如下所示:<ul data-bind="foreach: facets">
<li>
<span data-bind="text: name"></span>
<ul data-bind="foreach: values">
<li data-bind="text: value"></li>
</ul>
</li>
</ul>
问题是,如何在使用渐进增强时实现相同的结果?也就是说,最初在服务器端呈现模板,然后将knockout模板和视图模型绑定到该呈现上。一个简单的服务器端模板可能长这样:<ul>
<li>
<span>some name</span>
<ul>
<li>some value</li>
</ul>
</li>
</ul>
我探究了几种不同的可能性:
一种方法是创建一个Knockout模板和一个服务器端模板,并通过解析服务器端模板的DOM动态生成Knockout视图模型。这样,只有在启用JavaScript时才会显示Knockout模板,而如果禁用JavaScript,则只会显示服务器端模板。它们可以以相同的方式进行样式设置,使它们看起来完全相同。
另一种方法是将每个facets数组中的项分别应用绑定到该facet的现有DOM元素上。但是,这仍然只有一层深度,不适用于嵌套元素。
这些方法似乎都不太干净。另一个解决方案可以是编写一个自定义绑定,处理整个渲染过程并在可能的情况下重用现有元素。
还有其他的想法吗?