web-dev-qa-db-fra.com

Quels sont l'origine et le but des variables $ data dans KnockoutJS?

Dans les tutoriels KnockoutJS je suis tombé sur l'exemple de code suivant qui contient une variable inexplicable $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 didacticiel ne contient aucune explication à quoi ce signe dollar est utilisé et où ce $data vient de. La variable $data n'est nulle part défini et lorsque je renomme les trois instances de $data à $foobar, l'exemple ne fonctionne plus.

Quel genre de magie se passe ici?

javascripthtmlknockout.js
66
dokaspar

Le $data variable est une variable intégrée utilisée pour faire référence à l'objet courant lié. Dans l'exemple, c'est l'un des éléments du viewModel.folders tableau.

40
Thedric Walker

$ data fait partie de Knockout's Binding Contexts .

Voici toutes les variables intégrées:

  • $ parent
  • $ parents
  • $ root
  • $ composant
  • $ data
  • $ index (disponible uniquement dans les liaisons foreach)
  • $ parentContext
  • $ rawData
  • $ componentTemplateNodes
64
Derek Smith

je l'ai fait fonctionner

.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 consulter http://jsfiddle.net/bowen31337/48RDd/

0
bowen