più modelli vista per pagina e modelli di carico in modo asincrono

Question

Sto sviluppando un'applicazione che utilizza - 1. Knockout.js 2. Knockout.js Engine Modello esterno (ifandelse) [indirettamente utilizzando infusore, TrafficCop], 3, Sammy JS , Require JS, ecc.

Per promuovere la modularità e la facilità di sviluppo, sto progettando un'applicazione per utilizzare più viewmodels per pagina. Utilizzo dei suggerimenti di associazione di Ryan Niemeyer (http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html), che descrive come associare più viewmodels utilizzando la versione sovraccaricata di applyBindings. Questa tecnica ha funzionato bene fino a quando non ho deciso di utilizzare la libreria di Template Template External Knockout.js di Jim Cowart, che mi aiuta a separare i modelli in file ea caricarli in modo asincrono. Il motivo per cui non funziona è semplice, poiché applyBinding per associare viewmodel a un elemento DOM specifico, dovrebbe essere presente l'elemento DOM (che non è il caso in cui il modello viene richiesto e caricato in modo asincrono da KO External Template Engine). Non posso neanche usare afterRender, ecc.

Qualcuno si è imbattuto in questo scenario? Qualsiasi suggerimento, direzione a questo riguardo sarà molto utile. Mi mancano alcune funzionalità di KO che posso usare?

Per ora, come un lavoro in giro, ho aggiunto callback 'templateLoaded' mentre la definizione di template in HTML:

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

HTML Template:

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

Header viewmodel:

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

e modificato il metodo Knockout.js "executeTemplate()" con il seguente:

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

Ora, il callback viene chiamato dopo che il modello viene richiamato in modo asincrono, analizzato e caricato nel DOM. Questo aiuto associa viewmodel per correggere l'elemento.

Answer 1

sto usando la stessa architettura, come si sul MVC4 nel mio lavoro, la risposta è facile Jyotindra usare applybindingsTonode e quando si completa la richiesta al server, ad esempio

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

saluti! PS: puoi anche guardare questo knockout.js - lazy loading of templates