title: Scope of Javascript Variable in Knockout $root and $parent
body: <p>I have a javascript viewmodel that is set up to use knockout and I have two viewmodels within that viewmodel that I have databindings on in the context of my page. 
  So I have my page set up so that one viewmodel is bound to a section of my page with a "with" binding and then another viewmodel is bound to another section with a "with" binding. 
  Right now I have it set up so that for one item on the page after a click event I'm bound to the $root (the container viewmodel) and I want to edit some observables on the other viewmodel (not in this section of the page that I have the "with" binding). In the method on "root" that I call I set it up so that "var self = this" and then edit the properties I need to edit on the other viewmodel. The problem is that I have is that the scope of the method is changed when I call $root or $parent within the "with" binding from being the original object I wanted to manipulate (the container or "root" in this instance) to being the viewmodel that had the "with" binding on it, so it doesn't have any of the variables I need or the other viewmodel I need to manipulate.</p>
  
  <p>Is there a way to change my scope from within a $parent or $root call to something other than what I am getting currently? I just want the scope to be that of the container object and not the particular viewmodel.</p>
  
  <p>Code Example (in TypeScript):</p>
  
  <pre><code>class Container
  {
    viewModelA = new ViewModel();
    viewModelB = new ViewModelB();
  
    clickMe(){
      var self = this;
      console.log(self);
      self.viewModelB.property("yes");
    }
  }
  
  &lt;span data-bind="with: viewModelA"&gt; &lt;button data-bind="event: {click: $root.clickMe}" /&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The console.log will output viewModelA and I'll get an error on that self.viewModelB call.</p>