KnockoutJS的渐进式增强
KnockoutJS的渐进式增强
提问于 2012-01-22 20:34:28
假设我们有如下数据
var data = {
facets: [{
name : "some name",
values: [{
value: "some value"
}]
}]
};我们可以很容易地将其表示为绑定到敲除模板的视图模型，如下所示：
<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>问题是，在使用渐进式增强时，我们如何实现相同的结果？这是通过最初在服务器端呈现模板，然后将淘汰模板和视图模型绑定到该呈现来实现的。
一个简单的服务器端模板如下所示：
<ul>
<li>
<span>some name</span>
<ul>
<li>some value</li>
</ul>
</li>
</ul>我探索了几种不同的可能性：
- 的第一步是创建一个淘空模板和一个服务器端模板，并通过解析服务器端模板的DOM来动态生成淘空视图模型。这样，当启用JavaScript时，只有Knockout模板可见，而如果禁用JavaScript，则只有服务器端模板可见。它们的样式可以使它们看起来完全相同。
- 另一种方法是将facets数组中每个项目的绑定分别应用于该facet的现有DOM元素。但是，这仍然只有一层深，不适用于嵌套元素。
这两种方法似乎都不是很干净。另一种解决方案可能是编写一个自定义绑定来处理整个呈现过程，并在可能的情况下重用现有元素。
还有其他想法吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8961073
复制相关文章
相似问题