Jakie jest pochodzenie i cel zmiennej $ data w KnockoutJS?

Question

W KnockoutJS tutorials natknąłem się na poniższy przykład kodu, który zawiera niewytłumaczalną zmienną $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> 

widoku modelu (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); 

Tutorial nie zawiera żadnego wyjaśnienia, co to znak dolara jest używany i gdzie to $data przychodzi od. Zmienna $data nie jest nigdzie zdefiniowana i po zmianie nazwy wszystkich trzech wystąpień z $data na $foobar ten przykład już nie działa.

Jakiego rodzaju magia się tutaj dzieje?

Answer 1

Zmienna $data jest wbudowaną zmienną używaną do określenia bieżącego obiektu, który jest związany. W przykładzie jest to jeden z elementów w tablicy viewModel.folders.

Answer 2

Dane $ są częścią Knockout's Binding Contexts.

Oto wszystkie wbudowanej zmienne:

• $ rodzic
• $ rodzice
• $ korzeń
• $ składnik
• $ dane
• $ index (dostępne tylko w wiązania foreach)
• $ parentContext
• $ rawData
• $ componentTemplateNodes

Answer 3

zrobiłem to działa

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

proszę spojrzeć na http://jsfiddle.net/bowen31337/48RDd/