javascript - 使用 KnockoutJS 进行渐进式增强

标签 javascript knockout.js progressive-enhancement

假设我们有如下数据

var data = {
  facets: [{
    name : "some name",
    values: [{
      value: "some value" 
    }]
  }]
};

我们可以很容易地将其表示为绑定(bind)到 knockout 模板的 View 模型,如下所示:
<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 模板和 View 模型绑定(bind)到该渲染。

一个简单的服务器端模板看起来像这样:
<ul>    
  <li>      
    <span>some name</span>
    <ul>            
      <li>some value</li>       
    </ul>
  </li>
</ul>

我探索了几种不同的可能性:
  • 一种是创建一个knockout模板和一个服务器端模板,通过解析服务器端模板的DOM动态生成Knockout View 模型。这样,启用 JavaScript 时只有 Knockout 模板可见,禁用 JavaScript 时只有服务器端模板可见。它们的样式可以使它们看起来相同。
  • 另一种方法是将 facets 数组中每个项目的绑定(bind)分别应用于该 facet 的现有 DOM 元素。然而,这仍然只有一层深,不适用于嵌套元素。

  • 这些方法似乎都不是很干净。另一种解决方案可能是编写一个自定义绑定(bind)来处理整个渲染并在可能的情况下重用现有元素。

    还有其他想法吗?

    最佳答案

    我在这里探索了几种方法,包括从第一个元素生成匿名模板,如下所述:

    http://groups.google.com/group/knockoutjs/browse_thread/thread/3896a640583763d7

    或通过自定义绑定(bind)为数组的每个元素创建单独的绑定(bind),例如

    ko.bindingHandlers.prerenderedArray = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            var binding = valueAccessor();              
            binding.firstTime = true;
    
            $(element).children().each(function(index, node) {                  
                var value = ko.utils.unwrapObservable(binding.value)[index];                        
                ko.applyBindings(value, node);
            }); 
    
            return { 'controlsDescendantBindings': true };              
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel) {             
            var binding = valueAccessor();
            if (binding.firstTime) {
                binding.firstTime = false;
                return;
            }               
    
            $(element).children().remove(); 
            ko.applyBindingsToNode(element, { template: { name: binding.template, foreach: binding.value }}, viewModel)
        }
    };      
    

    它将特定绑定(bind)应用于每个元素,然后在第一次更新时用普通的 foreach 绑定(bind)替换内容。这种方法仍然意味着您仍然需要有两个模板。这两者还涉及通过服务器呈现的 JSON 来初始化状态。

    我选择使用的当前方法(尽管仍有可能更改)是将所有 Knockout 模板放在脚本标签中,这样它们就不会在 NoJS 浏览器中呈现。 NoJS 模板在服务器端呈现为 div 的内容。一旦 Knockout 模板被渲染,div 的内容将被脚本标签中的 Knockout 模板替换。您可以以相同/相似的方式对它们进行样式设置以使过渡无缝,如果这不可能通过 CSS 隐藏 noJS 模板。

    最后,我得出的结论是,Knockout.js 和渐进增强并不能很好地协同工作,应该选择其中一个,即使用更传统的方法(例如直接 jQuery)构建应用程序的某些需要渐进增强的部分DOM 操作。

    关于javascript - 使用 KnockoutJS 进行渐进式增强,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8961073/

    相关文章:

    javascript - 检查每个元素并根据父元素更改它 (JavaScript/jQuery)

    javascript - 嵌套指令中的内部指令未显示

    javascript - 指令属性中的花括号,angularJS

    javascript - KnockoutJS 新添加的元素没有样式表中的任何样式

    javascript - 滚动时, Logo 颜色发生变化,但向上滚动时它保持不变

    knockout.js - knockout 映射似乎打破了下拉菜单的值绑定(bind)

    javascript - 使用多个 View 模型时如何指定 View 的数据绑定(bind)上下文

    c# - 如何在 ASP.NET MVC 中实现插页式 "loading..."页面?

    javascript - 如何构建优雅降级的 HTML5 Range?

    asp.net - 长期运行任务的渐进增强