नॉकआउट दृश्य - नेस्टिंग संदर्भ में $ माता-पिता के $ माता-पिता तक पहुंचें


80

संक्षिप्तता के लिए अद्यतन किया गया

नेस्टेड नॉकआउट फॉरच्यूड / बाइंडिंग में मैं $ माता-पिता के $ माता-पिता का संदर्भ कैसे दे सकता हूं

उदाहरण -

    <!-- ko foreach: grandParent -->
        <tr>
            <!-- ko foreach: $parent.parents --> // <-- Doesn't work
                <!-- ko foreach: children -->
                    <td data-bind="if: favToy().name == $parent.$parent.favToy().name">
                        <span data-bind="text: favToy().name"></span>
                    </td>
                <!-- /ko -->
            <!-- /ko -->
        </tr>
    <!-- /ko -->

मूल

भ्रमित करने वाले प्रश्न के लिए क्षमा करें, लेकिन मैं एक दूसरे स्तर के माता-पिता के मूल्य को वर्तमान संदर्भ में मान के विपरीत जांचने की कोशिश कर रहा हूं (जैसे नीचे) केवल एक अवधि दिखाने के लिए अगर यह एक $ माता-पिता के $ माता-पिता के मूल्य (ugh!) से मेल खाता है

    <!-- ko foreach: grandParent -->
        <tr>
            <!-- ko foreach: $parent.parents -->
                <!-- ko foreach: children -->
                    <td data-bind="if: favToy().name == $parent.$parent.favToy().name">
                        <span data-bind="text: favToy().name"></span>
                    </td>
                <!-- /ko -->
            <!-- /ko -->
        </tr>
    <!-- /ko -->

इसे इस तरह से करना आसान होगा लेकिन मैंने जो पढ़ा है उससे यह संभव नहीं है या मैं इसे गलत कर रहा हूं :)

    <!-- ko foreach: grandParent -->
        <tr>
            <!-- ko foreach: $parent.parents -->
                <!-- ko foreach: children ? favToy().name == $parent.$parent.favToy().name -->
                    <td  data-bind="text: favToy().name"></td>
                <!-- /ko -->
            <!-- /ko -->
        </tr>
    <!-- /ko -->

किसी भी तरह की सहायता का स्वागत किया जाएगा।


मुझे आपका सवाल समझ नहीं आ रहा है, क्या काम नहीं कर रहा है? आपकी समस्या क्या है: का सिंटैक्स है $parent.$parentया जिसे आपको उपयोग करना होगा spanक्योंकि आप foreachऔर विलय नहीं कर सकते if?
— नीमेश्व

जवाबों:


136

$parentsसरणी का उपयोग करें , दादा दादी होगा $parents[1]। आप उपयोग करने में सक्षम हो सकते हैं $rootयदि grandParentआपके उदाहरण में ऑब्जेक्ट सबसे ऊपरी माता-पिता है।

से डॉक्स :

$ माता-पिता

यह एक ऐसा अभिभावक है जो सभी अभिभावक दृश्य मॉडल का प्रतिनिधित्व करता है:

$ माता-पिता [0] मूल संदर्भ से दृश्य मॉडल है (यानी, यह $ माता-पिता के समान है)

$ माता-पिता [1] भव्य संदर्भ से दृश्य मॉडल है

$ माता-पिता [2] महान-दादा-दादी के संदर्भ से दृश्य मॉडल है

… और इसी तरह।

$ जड़

यह मूल संदर्भ में मुख्य दृश्य मॉडल ऑब्जेक्ट है, अर्थात, सबसे ऊपरी मूल संदर्भ। यह आमतौर पर वह वस्तु है जिसे ko.applyBindings को पास किया गया था। यह $ माता-पिता [$ माता-पिता - 1 - 1] के बराबर है।


किसी कारण से $parent.$parentमेरे लिए काम नहीं किया, यह समाधान हालांकि ठीक काम किया, और यह बहुत छोटा है!
— पीटरम

8

आप उपयोग कर सकते हैं $parentContext.$parent।

$parentContext कई उपयोगी गुण प्रदान करें जैसे ($data , $parent, $index, ...)


0

मुझे लगता है कि इस तरह से noChildContext सेटिंग का उपयोग करना आसान होगा:

एक बच्चे के संदर्भ बनाने के बिना "जैसा" का उपयोग करना

विकल्प के रूप में डिफ़ॉल्ट व्यवहार वर्तमान आइटम के लिए एक नाम जोड़ना है, जबकि अभी भी सामग्री को आइटम से बांधना है। लेकिन आप संदर्भ को अपरिवर्तित रखना पसंद कर सकते हैं और केवल वर्तमान आइटम का नाम सेट कर सकते हैं। यह बाद का व्यवहार संभवतः नॉकआउट के भविष्य के संस्करण में डिफ़ॉल्ट होगा। इसे विशिष्ट बाइंडिंग के लिए चालू करने के लिए, NoChildContext विकल्प को सही पर सेट करें। जब इस विकल्प का उपयोग किया जाता है, तो सरणी आइटम तक सभी पहुंच दिए गए नाम के माध्यम से होनी चाहिए, और $ डेटा बाहरी व्यूमोडेल पर सेट रहेगा। उदाहरण के लिए:

<ul data-bind="foreach: { data: categories, as: 'category', noChildContext: true }">
    <li>
        <ul data-bind="foreach: { data: category.items, as: 'item', noChildContext: true }">
            <li>
                <span data-bind="text: category.name"></span>:
                <span data-bind="text: item"></span>
            </li>
        </ul>
    </li>
</ul>

यहाँ और पढ़ें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.