What is the origin and purpose of the variable $data in KnockoutJS?

Question

In the KnockoutJS tutorials I stumbled upon the following code example that contains an unexplainable variable $data.

The View (html):

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

The View Model (JavaScript):

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); 

The tutorial does not contain any explanation what that dollar sign is used for and where this $data comes from. The variable $data is nowhere defined and when I rename all three instances of $data to $foobar, the example does not work anymore.

What kind of magic is going on here?

Answer 1

$data is part of Knockout's Binding Contexts.

Here are all the built-in variables:

• $parent
• $parents
• $root
• $component
• $data
• $index (only available within foreach bindings)
• $parentContext
• $rawData
• $componentTemplateNodes