多視圖模式和裝載模板異步

我開發使用應用 - 1. Knockout.js 2. Knockout.js外部模板引擎（ifandelse）[間接使用浸泡，trafficcop]， 3，薩米JS ，要求JS等多視圖模式和裝載模板異步

爲了促進模塊化和易於開發，我構建了應用程序使用每個頁面多個視圖模型。使用來自Ryan Niemeyer的綁定技巧（http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html），它描述瞭如何使用applyBindings的重載版本綁定多個視圖模型。這個技術運行良好，直到我決定使用Jim Cowart的Knockout.js外部模板引擎庫，它幫助我將模板分離成文件，並異步加載它們。它不起作用的原因很簡單，對於applyBinding將視圖模型綁定到特定的DOM元素，DOM元素應該存在（當模板被KO外部模板引擎異步請求和加載時，情況並非如此）。我無法使用afterRender等。

有沒有人遇到過這種情況？任何建議，在這方面的方向將是非常有益的。我是否缺少可以使用的KO的某些功能？

現在，爲周圍的工作，我已經加入 'templateLoaded' 回調，而在HTML定義模板：

<!--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之後調用回調函數。這有助於將視圖模型綁定到正確的元素。

來源

2013-04-03 Jyotindra

我使用的是相同的架構，你對我的工作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

來源

2013-04-26 18:23:52 deividsito

現在，當你芬蘭菜單的加載，然後你將模板應用到你請求到服務器的視圖模型，並感謝交通警察，你可以向服務器請求模板太！ – deividsito

多視圖模式和裝載模板異步

回答

相關問題