javascript - observablearray - ¿Cuál es el origen y el propósito de la variable $ data en KnockoutJS?

knockout js data bind text

Question

En los tutoriales de KnockoutJS tropecé con el siguiente ejemplo de código que contiene una variable inexplicable $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>

El modelo de vista (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);

El tutorial no contiene ninguna explicación para qué se usa ese signo de dólar y de dónde provienen estos $data . La variable $data no está definida en ninguna parte y cuando cambio el nombre de las tres instancias de $data a $foobar , el ejemplo ya no funciona.

¿Qué tipo de magia está pasando aquí?

Answer 1

$ data es parte de Contextos vinculantes de Knockout .

Aquí están todas las variables incorporadas:

• $ padre
• $ padres
• $ raíz
• $ componente
• $ datos
• $ index (solo disponible dentro de los enlaces de foreach)
• $ parentContext
• $ rawData
• $ componentTemplateNodes

Answer 2

La variable $data es una variable incorporada que se usa para referirse al objeto actual que se está enlazando. En el ejemplo, este es uno de los elementos en la matriz viewModel.folders .

Answer 3

lo hice funcionar

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

por favor, eche un vistazo a http://jsfiddle.net/bowen31337/48RDd/