Perché qui è richiesto $ root?

Question

mi riferisco solo i tutorial da knockout.js:

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

Nell'interfaccia utente del markup è:

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

ed è ViewModel è:

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

Can

nessuno dimmi cos'è $ root e perché è richiesto? Se lo rimuovo, non funziona.

Answer 1

$root si riferisce al modello in alto nella gerarchia KnockoutJS (quella che si utilizza in .applyBindings). Nel tuo caso l'oggetto WebmailViewModel è lo $root.

È necessario, perché quando si utilizza foreach quindi all'interno del ciclo cambia il contesto. Tutto ciò che vuoi attivare qui è associato a un elemento all'interno di un ciclo. Quindi è necessario $root per utilizzare funzioni/campi definiti al di fuori di tale contesto (nel tuo caso chosenFolderId è un metodo dell'oggetto WebmailViewModel).

Answer 2

Dovrai controllare la pagina binding contexts.

$ radice

Questo è il principale oggetto vista del modello nel contesto principale, cioè, il più in alto contesto genitore . È equivalente a $ genitori [$ parents.length - 1].

Answer 3

Il $root contesto si riferisce sempre al primo livello ViewModel, indipendentemente loop o altre variazioni di portata. Questo ci consente di accedere ai metodi di alto livello per manipolare ViewModel.

Nell'esempio $data rappresentano valori di array di cartelle come "Inbox", "Archive", "Sent" e "spam". Ma $root rappresentano le funzioni di root di ViewModel come chosenFolderId e goToFolder.

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

Penso che questo collegamento esempi vi aiuterà di più.