Qual è l'origine e lo scopo della variabile $ data in KnockoutJS?

Question

Nel KnockoutJS tutorials mi sono imbattuto nel seguente esempio di codice che contiene una variabile inspiegabile $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> 

la vista del modello (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); 

Il tutorial non contiene alcuna spiegazione ciò che il simbolo del dollaro è usato per e dove questo $data viene a partire dal. La variabile $data non è definita da nessuna parte e quando rinominerò tutte e tre le istanze di $data in $foobar, l'esempio non funziona più.

Che tipo di magia sta succedendo qui?

Answer 1

La variabile $data è una variabile incorporata utilizzata per fare riferimento all'oggetto corrente associato. Nell'esempio questo è uno degli elementi nell'array viewModel.folders.

Answer 2

$ data fa parte di Knockout's Binding Contexts.

Ecco tutte le variabili built-in:

• $ genitore
• $ genitori
• $ radice
• $ componente
• $ dati
• $ index (disponibile solo all'interno foreach binding)
• $ parentContext
• $ rawData
• $ componentTemplateNodes

Answer 3

mi ha reso il lavoro

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

si prega di dare un'occhiata a http://jsfiddle.net/bowen31337/48RDd/