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 - lazy loading of templates

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

1 个答案: