每页多个视图模型和异步加载模板答案

【问题标题】：Multiple view models per page and loading templates asynchronously每页多个视图模型和异步加载模板
【发布时间】：2013-03-24 19:56:19
【问题描述】：

我正在使用 - 1. 淘汰赛.js 2. Knockout.js 外部模板引擎（ifandelse）【间接使用infuser，trafficcop】， 3、Sammy JS、Require JS等

为了促进模块化和易于开发，我正在构建应用程序以在每个页面上使用多个视图模型。使用来自 Ryan Niemeyer (http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html) 的绑定技巧，它描述了如何使用重载版本的 applyBindings 绑定多个视图模型。在我决定使用 Jim Cowart 的 Knockout.js 外部模板引擎库之前，这种技术一直很好，它帮助我将模板分离到文件中，并异步加载它们。它不起作用的原因很简单，对于将 viewmodel 绑定到特定 DOM 元素的 applyBinding，应该存在 DOM 元素（因为 KO 外部模板引擎正在异步请求和加载模板，所以情况并非如此）。我也不能使用afterRender等。

有人遇到过这种情况吗？在这方面的任何建议和方向都将非常有帮助。我是否缺少一些可以使用的 KO 功能？

现在，作为一种解决方法，我在 HTML 中定义模板时添加了“templateLoaded”回调：

<!--ko template: {name: 'header', templateUrl: '/templates/shell', templateLoaded: function () { header.bindViewModel.call(header) }} -->
<!--/ko-->

HTML 模板：

<!-- ko stopBinding: true -->
<header id="divHeader">
    <!-- Template Code using Header viewmodel -->
</header>
<!-- /ko -->

标题视图模型：

bindViewModel = function () {
    ko.applyBindings(this, $("#divHeader").get(0));
}

并修改了 Knockout.js 方法“executeTemplate()”，如下：

if (haveAddedNodesToParent) {
    if (options.templateLoaded ) {
        options.templateLoaded.call(bindingContext['$data']);
    }

    activateBindingsOnContinuousNodeArray(renderedNodesArray, bindingContext);
    if (options['afterRender'])
        ko.dependencyDetection.ignore(options['afterRender'], null, [renderedNodesArray, bindingContext['$data']]);
}

现在，在异步检索模板、解析并加载到 DOM 后调用回调。这有助于将视图模型绑定到正确的元素。

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

我在工作中使用与 MVC4 上相同的架构，答案很简单，例如 Jyotindra 使用 applybindingsTonode 和完成对服务器的请求时

  function loadMenu(){
       require('menu.js', function(menuViewmodel){
            ko.applyBindingsToNode(containerElement, { template: { name: 'itemTemplate', foreach: items }, menuViewmodel);
       }
    }

问候！ PS：你也可以看看这个knockout.js - lazy loading of templates

【讨论】：

现在，当您完成菜单的加载后，您可以将模板应用于您向服务器请求的视图模型，并且感谢交通警察，您也可以向服务器请求模板！跨度>