title: Why is $root required here?
body: <p>I am just referring the tutorials from knockout.js:</p>
  
  <p><a href="http://learn.knockoutjs.com/#/?tutorial=webmail">http://learn.knockoutjs.com/#/?tutorial=webmail</a></p>
  
  <p>In the UI the markup is:</p>
  
  <pre><code>&lt;!-- Folders --&gt;
  &lt;ul class="folders" data-bind="foreach: folders"&gt;
      &lt;li data-bind="text: $data,
                     css: { selected: $data == $root.chosenFolderId() },
                     click: $root.goToFolder"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and it's ViewModel is:</p>
  
  <pre><code>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());
  </code></pre>
  
  <p>Can anybody tell me what is is $root and why is it required? If I remove it, it doesn't work.</p>