Come fare riferimento allo stesso ambito genitore/nonno con cicli nidificati?

Question

Ho loop nidificati con Knockout. Mi piacerebbe fare riferimento a qualcosa in un "ambito" genitore. Se vedi sotto, voglio sempre riferirti allo stesso genitore/nonno, indipendentemente da quanto profondo annidi i loop. Ho visto il binding "with", non sono sicuro che mi aiuterà. C'è un modo in cui posso creare un alias per un particolare ambito, quindi più in basso nel ciclo annidato posso fare riferimento a questo alias e comunque essere in grado di fare riferimento allo scope del loop corrente anche?

<!-- Somewhere up there is the "scope" I want to capture --> 
    <!-- ko foreach: getPages() --> 
     <span data-bind="text: pageName" ></span> 
     <button data-bind="click: $parents[1].myFunction()" >Press me</button> 
     <!-- ko foreach: categories --> 
      <span data-bind="text: categoryName" ></span> 
      <button data-bind="click: $parents[2].myFunction()" >Press me</button> 
      <!-- ko foreach: questions --> 
       <span data-bind="text: questionText" ></span> 
       <button data-bind="click: $parents[3].myFunction()" >Press me</button> 
      <!-- /ko --> 
     <!-- /ko --> 
    <!-- /ko --> 

Answer 1

penso che questo vi aiuterà a Calling a function in a parent's scope in nested view model

e la demo jsfiddle jsfiddle

Answer 2

Il foreach binding supporta as alias come fa il (custom) withProperties binding.

<!-- ko withProperties: { book: $root.getBook() } --> 
    <!-- ko foreach: {data: book.pages, as: 'page'} --> 
    <span data-bind="text: page.pageName" ></span> 
    <button data-bind="click: book.bookClicked" >Press me</button> 
    <!-- ko foreach: {data: page.categories, as: 'category'} --> 
     <span data-bind="text: category.categoryName" ></span> 
     <button data-bind="click: page.pageClicked" >Press me</button> 
     <!-- etc --> 
    <!-- /ko --> 
    <!-- /ko --> 
<!-- /ko --> 

Nessuno dei miei attacchi dichiarativi utilizzare direttamente $parent.

Answer 3

Il problema con lo @user2864740 answer è che non funziona fuori dalla scatola jsFiddle.

Il primo numero:

The binding 'withProperties' cannot be used with virtual elements

per risolvere questo è sufficiente aggiungere il seguente codice:

ko.virtualElements.allowedBindings.withProperties = true; 

Dopo di che, si otterrà un'altra eccezione:

Unable to parse bindings. Message: ReferenceError: 'book' is undefined; Bindings value: foreach: {data: book.pages, as: 'page'}

che indica che il withProperties non funziona affatto - non ha creato il book proprietà nel contesto vincolante per i suoi collegamenti figlio come ci si potrebbe aspettare.

riportano di seguito le personalizzato completamente funzionante e riutilizzabile vincolante (jsFiddle):

ko.bindingHandlers.withProperties = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // Make a modified binding context, with a extra properties, and apply it to descendant elements 
     var value = ko.utils.unwrapObservable(valueAccessor()), 
      innerBindingContext = bindingContext.extend(value); 

     ko.applyBindingsToDescendants(innerBindingContext, element); 

     // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice 
     return { controlsDescendantBindings: true }; 
    } 
}; 
ko.virtualElements.allowedBindings.withProperties = true;