$ रूट की आवश्यकता क्यों है?

Question

मैं सिर्फ knockout.js से ट्यूटोरियल जिक्र कर रहा हूँ:

http://learn.knockoutjs.com/#/?tutorial=webmail

UI में मार्कअप है:

<!-- Folders --> 
<ul class="folders" data-bind="foreach: folders"> 
    <li data-bind="text: $data, 
        css: { selected: $data == $root.chosenFolderId() }, 
        click: $root.goToFolder"></li> 
</ul> 

और यह ViewModel है:

function WebmailViewModel() { 
    // Data 
    var self = this; 
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam']; 
    self.chosenFolderId = ko.observable(); 

    // Behaviours  
    self.goToFolder = function(folder) { self.chosenFolderId(folder); };  
}; 

ko.applyBindings(new WebmailViewModel()); 

सकते हैं

किसी को भी मुझे बताओ कि $ रूट क्या है और इसकी आवश्यकता क्यों है? अगर मैं इसे हटा देता हूं, तो यह काम नहीं करता है।

Answer 1

$root नॉकआउटजेएस पदानुक्रम में शीर्ष मॉडल को संदर्भित करता है (जिसे आप .applyBindings में उपयोग करते हैं)। आपके मामले में WebmailViewModel ऑब्जेक्ट $root है।

यह आवश्यक है, क्योंकि जब आप foreach का उपयोग करते हैं तो लूप के अंदर संदर्भ बदल जाता है। जो कुछ भी आप यहां आग लगाना चाहते हैं वह एक लूप के भीतर एक तत्व से जुड़ा हुआ है। इस प्रकार आपको उस संदर्भ के बाहर परिभाषित कार्यों/फ़ील्ड का उपयोग करने के लिए $root की आवश्यकता है (आपके मामले में chosenFolderIdWebmailViewModel ऑब्जेक्ट का एक तरीका है)।

Answer 2

आपको binding contexts पृष्ठ देखने की आवश्यकता होगी।

$ जड़

यह जड़ संदर्भ में मुख्य दृश्य मॉडल वस्तु, जैसे कि, सर्वोच्च माता पिता संदर्भ है। यह $ माता-पिता के बराबर है [$ माता-पिता। लम्बाई - 1]।

Answer 3

$root संदर्भ हमेशा की तरह, छोरों या दायरे में अन्य परिवर्तन की परवाह किए बिना उच्च-स्तरीय ViewModel को दर्शाता है। यह हमें ViewModel में हेरफेर करने के लिए शीर्ष-स्तरीय विधियों तक पहुंचने की अनुमति देता है।

आपके उदाहरण में $data 'इनबॉक्स', 'संग्रह', 'प्रेषित' और 'स्पैम' जैसे फ़ोल्डर सरणी मानों का प्रतिनिधित्व करता है। लेकिन $root 0Mऔर goToFolder जैसे व्यूमोडेल के मूल कार्यों का प्रतिनिधित्व करता है।

http://www.dotnet-tricks.com/Tutorial/knockout/bSKG240313-Understanding-Knockout-Binding-Context-Variable.html

मुझे लगता है कि इस लिंक उदाहरण आप और अधिक मदद मिलेगी देखें।