爲什麼在這裏需要$ root？

Question

我只是從knockout.js參考教程：

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

在UI的標記是：

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

，它的視圖模型是：

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

能

人告訴我什麼是$ root，爲什麼它是必需的？如果我刪除它，它不起作用。

Answer 1

$root引用KnockoutJS層次結構中的頂級模型（您在.applyBindings中使用的模型）。在你的情況下，WebmailViewModel對象是$root。

這是必需的，因爲當您使用foreach時，則在循環內部會更改上下文。您想要在此處觸發的所有內容都與循環內的元素相關聯。因此，您需要使用$root來使用在該上下文之外定義的函數/字段（在您的情況下chosenFolderId是WebmailViewModel對象的一種方法）。

Answer 2

您需要查看binding contexts頁面。

$根

這是在根上下文主視圖模型對象，即該最上面的 父上下文。這相當於$父母[$ parents.length - 1]。

Answer 3

$root上下文始終引用頂級ViewModel，而不管循環或其他更改的範圍。這使我們能夠訪問用於操作ViewModel的頂級方法。

在您的示例中，$data表示文件夾數組值，如「收件箱」，「存檔」，「已發送」和「垃圾郵件」。但$root代表ViewModel的根函數，如chosenFolderId和goToFolder。

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

我覺得這個鏈接例子可以幫助你。