Quelle est l'origine et le but de la variable $data en KnockoutJS?

Question

Dans le KnockoutJS tutoriels , je suis tombé sur l'exemple de code suivant qui contient un inexplicable variable $data.

La Vue (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>

Le Modèle De Vue (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);

Le tutoriel ne contient pas d'explication à ce que le signe dollar est utilisé et où cette $data vient de. La variable $data n'est définie nulle part et quand je renomme tous les trois instances de l' $data de $foobar, l'exemple ne fonctionne plus.

Quelle sorte de magie qui se passe ici?

Answer 1

$data fait partie de knock-out de Reliure de Contextes.

Voici toutes les variables intégrées:

• $parent
• $parents
• $root
• $data
• $index (disponible uniquement dans les foreach liaisons)
• $parentContext
• $contexte
• $element

Answer 2

Le $data variable est une variable intégrée utilisé pour faire référence à l'objet courant lié. Dans l'exemple c'est l'un des éléments dans le viewModel.les dossiers de tableau.

Answer 3

j'ai fait le travail

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

veuillez prendre un coup d'oeil à http://jsfiddle.net/bowen31337/48RDd/