title: What is the origin and purpose of the variable $data in KnockoutJS?
body: <p>In the <a href="http://learn.knockoutjs.com/#/?tutorial=webmail" rel="noreferrer">KnockoutJS tutorials</a> I stumbled upon the following code example that contains an unexplainable variable <code>$data</code>. </p>
  
  <p>The View (html):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!-- Folders --&gt;
  &lt;ul class="folders" data-bind="template: { name: 'folderTemplate', foreach: folders }"&gt;&lt;/ul&gt;
  &lt;script type="text/html" id="folderTemplate"&gt;
      &lt;li data-bind="css: { selected: $data == mailViewModel.selectedFolder() },
                     click: function() { mailViewModel.selectFolder($data) }"&gt;
          ${$data}
      &lt;/li&gt;    
  &lt;/script&gt;
  </code></pre>
  
  <p>The View Model (JavaScript):</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>The tutorial does not contain any explanation what that dollar sign is used for and where this <code>$data</code> comes from. The variable <code>$data</code> is nowhere defined and when I rename all three instances of <code>$data</code> to <code>$foobar</code>, the example does not work anymore. </p>
  
  <p>What kind of magic is going on here?</p>