title: How can I use knockout's $parent/$root pseudovariables from inside a .computed() observable?
body: <p>Inside a <a href="http://knockoutjs.com/">knockout.js</a> binding expression, I can use the <a href="http://knockoutjs.com/documentation/foreach-binding.html"><code>$data</code>, <code>$parent</code>, and <code>$root</code> pseudovariables</a>. How can I get the equivalent of those pseudovariables when I'm using a <a href="http://knockoutjs.com/documentation/computedObservables.html"><code>ko.computed</code> observable</a> declared in JavaScript?</p>
  
  <p>I've got a parent viewmodel with a collection of children, and the parent viewmodel has a <code>selectedChild</code> observable. Given that, I can use databinding expressions to add a CSS class to whichever child is currently selected:</p>
  
  <pre><code>&lt;ul data-bind="foreach: children"&gt;
      &lt;li data-bind="text: name,
                     css: {selected: $data === $root.selectedChild()},
                     click: $root.selectChild"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;script&gt;
  vm = {
      selectedChild: ko.observable(),
      children: [{name: 'Bob'}, {name: 'Ned'}],
      selectChild: function(child) { vm.selectedChild(child); }
  };
  ko.applyBindings(vm);
  &lt;/script&gt;
  </code></pre>
  
  <p>But my viewmodels are going to get more complex, and I'd like "am I selected?" to be able to do more than just adding a single CSS class to a single element. I really want to make an <code>isSelected</code> computed property on the child viewmodel, so I can then add other computed properties that depend on it.</p>
  
  <p>I've tried just writing JavaScript that refers to <code>$data</code> and <code>$root</code>, on the off-chance that knockout might define those variables and somehow have them be in scope when it calls my <code>computed</code> evaluator function:</p>
  
  <pre><code>{
    name: 'Bob',
    isSelected: ko.computed(function(){ return $data === $root.selectedChild(); })
  }
  </code></pre>
  
  <p>But no such luck: inside my evaluator <code>function</code>, both <code>$data</code> and <code>$root</code> are <code>undefined</code>.</p>
  
  <p>I've also tried using <a href="http://knockoutjs.com/documentation/unobtrusive-event-handling.html"><code>ko.contextFor</code></a> inside my evaluator, since it does give access to <code>$data</code> and <code>$root</code>. Unfortunately, inside my evaluator function, <code>contextFor</code> also always returns <code>undefined</code>. (I didn't hold out high hopes for this strategy anyway -- it's not clear how well knockout would be able to track the dependencies if I had to go behind its back like this.)</p>
  
  <p>I could always manually set a property on each child viewmodel that refers back to the parent viewmodel. But I know that knockout has the ability to do this for me, and I'd like to at least explore whether I can use its mechanisms before I go writing my own.</p>
  
  <p>It seems like it should be possible to translate the above binding expression to a computed observable -- after all, <a href="http://knockoutjs.com/documentation/computedObservables.html">that's what knockout already does</a>:</p>
  
  <blockquote>
    <p>The other neat trick is that declarative bindings are simply implemented as computed observables.</p>
  </blockquote>
  
  <p>But how do I go about dealing with the <code>$data</code> and <code>$root</code> pseudovariables when I'm writing my own computed observable?</p>