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

Answer 1

i made it work

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

please take a look at http://jsfiddle.net/bowen31337/48RDd/

Answer 2

$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

Answer 3

The $data variable is a built-in variable used to refer to the current object being bound. In the example this is the one of the elements in the viewModel.folders array.