5

我正在使用 - 1. Knockout.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 之后调用回调。这有助于将视图模型绑定到正确的元素。

4

1 回答 1

1

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

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

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

于 2013-04-26T18:23:52.590 回答