每页多个视图模型并异步加载模板

Question

我正在开发一个应用程序使用 - 1. Knockout.js 2. Knockout.js外部模板引擎(ifandelse)[间接使用infuser,trafficcop],3,Sammy JS,需要JS等.

为了促进模块化和易于开发,我正在构建应用程序以在每页上使用多个视图模型.使用Ryan Niemeyer的绑定提示(http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html),其中介绍了如何使用重载版本的applyBindings绑定多个视图模型.这项技术运行良好,直到我决定使用Jim Cowart的Knockout.js外部模板引擎库,它帮助我将模板分离到文件中,并异步加载它们.它不起作用的原因很简单,因为applyBinding将viewmodel绑定到特定的DOM元素,所以应该存在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之后调用回调.这有助于将viewmodel绑定到正确的元素.

Answer 1

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

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

问候！PS：你也可以看看这个knockout.js - 模板的延迟加载