Jak odnosić się do tego samego zakresu nadrzędnego/głównego z pętlami zagnieżdżonymi?

Question

Mam zagnieżdżone pętle z Knockout. Chciałbym odnieść się do czegoś w rodzimym "zakresie". Jeśli zobaczysz poniżej, zawsze chcę odnosić się do tego samego rodzica/dziadka, bez względu na to, jak głęboko zagnieżdżam pętle. Widziałem wiązanie "z", nie jestem pewien, czy to mi pomoże. Czy istnieje sposób, w jaki mogę utworzyć alias do określonego zakresu, więc w dalszej części zagnieżdżonej pętli mogę odnieść się do tego aliasu i nadal móc odnosić się do zakresu bieżącej pętli?

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

myślę, że to pozwoli Ci Calling a function in a parent's scope in nested view model

a jsfiddle demo jsfiddle

Answer 2

foreach binding obsługuje as aliasy podobnie jak (custom) withProperties binding pomóc.

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

Żaden moich deklaratywnych wiązań bezpośrednio korzystać $parent.

Answer 3

Problem z @user2864740 answer polega na tym, że nie działa po wyjęciu z pudełka jsFiddle.

Pierwszy problem:

The binding 'withProperties' cannot be used with virtual elements

Aby ustalić, że po prostu dodaj następujący kod:

ko.virtualElements.allowedBindings.withProperties = true; 

potem dostaniesz kolejny wyjątek:

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

co wskazuje że withProperties nie działa w ogóle - nie utworzył book Właściwość w kontekście powiązania dla powiązań potomnych, jak można się spodziewać.

Poniżej jest wiążąca całkowicie pracy i wielokrotnego użytku niestandardowy (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;