Каково происхождение и назначение переменных $data в KnockoutJS?

В учебниках по KnockoutJS Я наткнулся на следующий пример кода, который содержит необъяснимую переменную $data.

Вид (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>

Модель просмотра (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);

В учебнике нет никакого объяснения, для чего используется этот знак доллара и откуда этот $data. Переменная $data нигде не определена, и когда я переименую все три экземпляра $data в $foobar, этот пример больше не работает.

Какая здесь магия?

Ответ 1

Переменная $data - это встроенная переменная, используемая для ссылки на текущий связанный объект. В примере это один из элементов массива viewModel.folders.

Ответ 2

$data является частью Контексты привязки нокаута.

Вот все встроенные переменные:

$родительская
$родителей
$корень
$компонент
$данных
$index (доступно только для привязок foreach)
$parentContext
$RAWDATA
$componentTemplateNodes

Ответ 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/