javascript data-bind - Quelle est l'origine et le but de la variable $ data dans KnockoutJS?





html foreach (4)


$ data fait partie des contextes de liaison de Knockout .

Voici toutes les variables intégrées:

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

Dans les didacticiels 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 tutoriel ne contient aucune explication sur l'utilisation de ce symbole dollar et sur l'origine de ces $data . La variable $data n'est nulle part définie et quand je renommer les trois instances de $data en $foobar , l'exemple ne marche plus.

Quel genre de magie se passe ici?




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

S'il vous plaît jeter un oeil à http://jsfiddle.net/bowen31337/48RDd/




La variable $data est une variable intégrée utilisée pour désigner l'objet courant lié. Dans l'exemple, il s'agit de l'un des éléments du tableau viewModel.folders .




Appeler et appliquer les deux servent à forcer this valeur lorsqu'une fonction est exécutée. La seule différence est que l' call prend n+1 arguments, où 1 est this et 'n' arguments . apply prend seulement deux arguments, l'un est this l'autre est un tableau d'arguments.

L'avantage que je vois dans apply over call est que nous pouvons facilement déléguer un appel de fonction à une autre fonction sans trop d'effort.

function sayHello() {
  console.log(this, arguments);
}

function hello() {
  sayHello.apply(this, arguments);
}

var obj = {name: 'my name'}
hello.call(obj, 'some', 'arguments');

Observez la facilité avec laquelle nous avons délégué hello à dire sayHello en apply , mais il est très difficile d’obtenir un call .







javascript html knockout.js