Çoklu sayfa başına görünümü modelleri ve yükleme şablonları uyumsuz

Question

Ben kullanarak uygulama geliştiriyorum

- 1. Knockout.js 2. Knockout.js Harici Şablon Motor (ifandelse) [dolaylı kullanarak demlik, TrafficCop], 3 Sammy JS , JS Gerektirir vb.

Modülerliği ve geliştirme kolaylığını tanıtmak için, sayfa başına birden çok görünüm modelini kullanacak şekilde mimarlık uygulaması yapıyorum. Birden çok görünüm modelinin applyBindings'in aşırı yüklü sürümünü kullanarak nasıl bağlanacağını açıklayan Ryan Niemeyer (http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html) 'dan bağlama ipuçlarını kullanma. Bu teknik, Jim Cowart'tan Knockout.js Harici Şablon Motoru kütüphanesini kullanmaya karar verene kadar iyi çalıştı, bu da şablonları dosyalara ayırmamda ve bunları senkronize olmayan şekilde yüklememde yardımcı oldu. İşleyememe nedeni basittir, viewmodel'i belirli bir DOM öğesine bağlamak için applyBinding için DOM öğesi mevcut olmalıdır (şablon olarak KO Harici Şablon Altyapısı tarafından istenip yüklenip yüklenmediği durum böyle değildir). AfterRender'ı kullanamam vb.

Bu senaryoyu gören var mı? Bu konuda herhangi bir öneri, yön çok yardımcı olacaktır. Kullanabileceğim KO'nın bazı özelliklerini özlüyorum mu?

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

HTML Şablon:

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

Başlık ViewModel:

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

HTML şablonu tanımlarken Şimdilik

, geçici bir çözüm olarak, ben 'templateLoaded' geri arama eklemiş

ve aşağıdaki "executeTemplate()" yöntemiyle Knockout.js yöntemini değiştirdi:

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']]); 
} 

Şimdi, şablon eşzamansız olarak alındıktan, ayrıştırılıp DOM'a yüklendikten sonra geri arama çağrılır. Bu, viewmodel'in öğeyi düzeltmesine yardımcı olur. İşime içinde MVC4 üzerinde sizinle aynı mimariyi kullanıyorum

Answer 1

, cevap örneğin

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

Selamlar için sunucuya isteği tamamlamak zaman kolay Jyotindra applybindingsTonode kullanıp olduğunu! PS: Eğer menü yükleme Fin o zaman sunucuya istekte ViewModel şablonu uyguladığınızda şimdi de bu knockout.js - lazy loading of templates