knockout.js
डीबगिंग एक नॉकआउट। जेएस आवेदन

एक डोम तत्व के बाध्यकारी संदर्भ की जाँच करना

नॉकआउट डेटा बाइंड में कई बग एक दृश्यदर्शी में अपरिभाषित गुणों के कारण होते हैं। HTML तत्व के बाइंडिंग प्रसंग को पुनः प्राप्त करने के लिए नॉकआउट के दो आसान तरीके हैं:

// Returns the binding context to which an HTMLElement is bound
ko.contextFor(element);    

// Returns the viewmodel to which an HTMLElement is bound
// similar to: ko.contextFor(element).$data
ko.dataFor(element);       

UI तत्व के बाध्यकारी संदर्भ का जल्द पता लगाने के लिए, यहाँ एक आसान ट्रिक दी गई है:

अधिकांश आधुनिक ब्राउज़र वर्तमान में चुने गए DOM तत्व को एक वैश्विक चर में संग्रहीत करते हैं: $0 ( इस तंत्र के बारे में अधिक )

• अपने UI में एक तत्व पर राइट क्लिक करें और संदर्भ मेनू में "निरीक्षण" या "तत्व का निरीक्षण करें" चुनें।
• डेवलपर कंसोल में ko.dataFor($0) टाइप करें और एंटर दबाएं

ब्राउज़र प्लगइन्स भी मौजूद हैं जो ऑब्जेक्ट संदर्भ खोजने में सहायता कर सकते हैं।

एक उदाहरण (इसे नॉकआउट हेल्लो वर्ल्ड उदाहरण पर आज़माएं):

मार्कअप से एक बाध्यकारी संदर्भ मुद्रण

कभी-कभी यह मार्कअप से सीधे वर्तमान बाइंडिंग को प्रिंट करने के लिए उपयोगी होता है। एक स्वच्छ चाल है कि अनुमति देता है कस्टम बंधन या एक बाध्यकारी है कि इस तरह के रूप में प्रासंगिक नहीं है, एक गैर-मौजूद बाध्यकारी (KO <3.0) के साथ एक अतिरिक्त DOM एलीमेंट उपयोग करने के लिए है uniqueName ।

इस उदाहरण पर विचार करें:

<tbody data-bind="foreach: people">
    <tr>
         <td data-bind="text: firstName"></td>
         <td data-bind="text: lastName"></td>
    </tr>
</tbody>

यदि कोई व्यक्ति एरे में प्रत्येक तत्व के बाध्यकारी संदर्भ का पता लगाना चाहे, तो कोई लिख सकता है:

<tbody data-bind="foreach: people">
    <span data-bind="uniqueName: console.log($data)"></span>
    <tr>
        <td data-bind="text: firstName"></td>
        <td data-bind="text: lastName"></td>
    </tr>
</tbody>