¿Cómo hacer referencia al mismo alcance padre/abuelo con bucles anidados?

Question

He anidado bucles con Knockout. Me gustaría referirme a algo en un "alcance" parental. Si ve a continuación, siempre quiero referirme al mismo padre/abuelo, sin importar cuán profundo anide los bucles. He visto el enlace "con", no estoy seguro de que me ayude. ¿Hay alguna manera de que pueda crear un alias para un ámbito particular, por lo que más abajo en el ciclo anidado puedo referirme a este alias y aún así poder referirme al alcance del ciclo actual también?

<!-- 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

creo que esto le ayudará a Calling a function in a parent's scope in nested view model

y la demo jsFiddle jsfiddle

Answer 2

El foreach binding apoya as alias al igual que el (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 --> 

Ninguno de mis fijaciones declarativas utilizar directamente $parent.

Answer 3

El problema con @user2864740 answer es que no funciona de la caja jsFiddle.

La primera cuestión:

The binding 'withProperties' cannot be used with virtual elements

Para solucionar esto, simplemente agregue el siguiente código:

ko.virtualElements.allowedBindings.withProperties = true; 

Después de eso, usted obtendrá otra excepción:

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

Lo que indica que el withProperties no funciona en absoluto, no ha creado el book propiedad en el contexto de enlace para sus vinculaciones hijo como es de esperar.

A continuación se muestra la unión personalizada totalmente funcional y reutilizable (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;