KnockoutJS में परिवर्तनीय $ डेटा का मूल और उद्देश्य क्या है?

Question

KnockoutJS tutorials में मैंने निम्नलिखित कोड उदाहरण पर ठोकर खाई जिसमें एक अस्पष्ट चर $data शामिल है।

देखें (एचटीएमएल):

<!-- Folders --> 
<ul class="folders" data-bind="template: { name: 'folderTemplate', foreach: folders }"></ul> 
<script type="text/html" id="folderTemplate"> 
    <li data-bind="css: { selected: $data == mailViewModel.selectedFolder() }, 
        click: function() { mailViewModel.selectFolder($data) }"> 
     ${$data} 
    </li>  
</script> 

देखें मॉडल (जावास्क्रिप्ट):

var viewModel = { 
    // Data 
    folders: ['Inbox', 'Archive', 'Sent', 'Spam'], 
    selectedFolder: ko.observable('Inbox'), 

    // Behaviours 
    selectFolder: function (folder) { 
     this.selectedFolder(folder); 
    }  
}; 

window.mailViewModel = viewModel; 
ko.applyBindings(viewModel); 

ट्यूटोरियल कोई स्पष्टीकरण शामिल नहीं है क्या कि डॉलर चिह्न के लिए प्रयोग किया जाता है और जहां इस $data आता है से। परिवर्तनीय $data कहीं भी परिभाषित नहीं किया गया है और जब मैं $data से $foobar के सभी तीन उदाहरणों का नाम बदलता हूं, तो उदाहरण अब और काम नहीं करता है।

यहां किस प्रकार का जादू चल रहा है?

Answer 1

$data चर एक अंतर्निहित चर है जो वर्तमान वस्तु को बाध्य करने के लिए उपयोग किया जाता है। उदाहरण में यह viewModel.folders सरणी में तत्वों में से एक है।

Answer 2

$ डेटा Knockout's Binding Contexts का हिस्सा है।

• $ माता पिता
• $ माता-पिता
• $ जड़
• $ घटक
• $ डेटा
• $ सूचकांक (ही उपलब्ध भीतर:

  यहाँ सब बिल्ट-इन वैरिएबल हैं foreach बाइंडिंग्स)

• $ parentContext
• $ rawData
• $ componentTemplateNodes

Answer 3

मैं यह काम

.selected { 
    color:red; 
} 

<ul class="folders" data-bind="template: { name: 'folderTemplate', foreach: folders }"></ul> 
<script type="text/html" id="folderTemplate"> 
    <li data-bind="css: { selected: $data == mailViewModel.selectedFolder() },text:$data, 
        click: function() { mailViewModel.selectFolder($data) }"> 
    </li>  
</script> 

var viewModel = { 
    // Data 
    folders: ['Inbox', 'Archive', 'Sent', 'Spam'], 
    selectedFolder: ko.observable('Inbox'), 

    // Behaviours 
    selectFolder: function (folder) { 
     this.selectedFolder(folder); 
    }  
}; 

window.mailViewModel = viewModel; 
ko.applyBindings(viewModel); 

कृपया http://jsfiddle.net/bowen31337/48RDd/