¿Por qué se requiere $ root aquí?

Question

Yo sólo me refiero a los tutoriales de knockout.js:

http://learn.knockoutjs.com/#/?tutorial=webmail

En la interfaz de usuario es el marcado:

<!-- Folders --> 
<ul class="folders" data-bind="foreach: folders"> 
    <li data-bind="text: $data, 
        css: { selected: $data == $root.chosenFolderId() }, 
        click: $root.goToFolder"></li> 
</ul> 

y es modelo de vista es:

function WebmailViewModel() { 
    // Data 
    var self = this; 
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam']; 
    self.chosenFolderId = ko.observable(); 

    // Behaviours  
    self.goToFolder = function(folder) { self.chosenFolderId(folder); };  
}; 

ko.applyBindings(new WebmailViewModel()); 

puede

a nadie dime ¿qué es $ root y por qué es obligatorio? Si lo elimino, no funciona.

Answer 1

$root se refiere al modelo superior en la jerarquía KnockoutJS (la que usa en .applyBindings). En su caso, el objeto WebmailViewModel es el $root.

Es obligatorio, porque cuando usa foreach, entonces dentro del ciclo, el contexto cambia. Todo lo que desea activar aquí está asociado a un elemento dentro de un bucle. Por lo tanto, necesita $root para usar funciones/campos definidos fuera de ese contexto (en su caso, chosenFolderId es un método del objeto WebmailViewModel).

Answer 2

Deberá echar un vistazo a la página binding contexts.

$ raíz

Este es el principal objeto de vista del modelo en el contexto de la raíz, es decir, el contexto matriz superior . Es equivalente a $ parents [$ parents.length - 1].

Answer 3

El contexto $root siempre se refiere al nivel superior ViewModel, independientemente de bucles u otros cambios en el alcance. Esto nos permite acceder a métodos de nivel superior para manipular ViewModel.

En su ejemplo $data representan valores de matriz de carpeta como 'Bandeja de entrada', 'Archivar', 'Enviados' y 'spam'. Pero $root representan las funciones de raíz de ViewModel como chosenFolderId y goToFolder.

Ver http://www.dotnet-tricks.com/Tutorial/knockout/bSKG240313-Understanding-Knockout-Binding-Context-Variable.html

Creo que este vínculo ejemplos le ayudará más.