नेस्टेड लूप के साथ एक ही माता-पिता/दादा-दायरे के दायरे को कैसे देखें?

Question

मेरे पास नॉकआउट के साथ नेस्टेड लूप हैं। मैं माता-पिता "स्कोप" में कुछ संदर्भ देना चाहता हूं। यदि आप नीचे देखते हैं तो मैं हमेशा एक ही अभिभावक/दादाजी को संदर्भित करना चाहता हूं चाहे मैं लूप को कितना गहरा कर दूं। मैंने बाध्यकारी के साथ "देखा" देखा है, यकीन नहीं है कि यह मेरी मदद करेगा। क्या कोई तरीका है कि मैं किसी विशेष दायरे में उपनाम बना सकता हूं, इसलिए नेस्टेड लूप में आगे नीचे मैं इस उपनाम का उल्लेख कर सकता हूं और फिर भी वर्तमान लूप के दायरे को भी देख सकता हूं?

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

मुझे लगता है कि यह आप Calling a function in a parent's scope in nested view model

और jsfiddle डेमो jsfiddle

Answer 2

foreach bindingas उपनाम का समर्थन करता है (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 --> 

मेरी कथात्मक बाइंडिंग से कोई भी सीधे $parent का उपयोग करें।

Answer 3

@user2864740 answer के साथ समस्या यह है कि यह jsFiddle बॉक्स से बाहर काम नहीं करता है।

पहला मुद्दा:

The binding 'withProperties' cannot be used with virtual elements

कि बस निम्नलिखित कोड जोड़ने के ठीक करने के लिए:

ko.virtualElements.allowedBindings.withProperties = true; 

उसके बाद, आप एक और अपवाद मिल जाएगा:

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

जो इंगित करता है कि withProperties बिल्कुल काम नहीं कर रहा है - इसनेनहीं बनाया है 210 बच्चे अपने बाध्यकारी संदर्भ में बाध्यकारी संदर्भ में जैसा कि आप उम्मीद कर सकते हैं।

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; 

:

नीचे पूरी तरह से काम करने और पुन: प्रयोज्य कस्टम बाध्यकारी (jsFiddle) है