What is the origin and purpose of the variable $data in KnockoutJS?
JavascriptHtmlknockout.jsJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
$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
Solution 2 - Javascript
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.
Solution 3 - Javascript
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/