title: How to access parent or root viewmodels from within custom binding in durandal/knockout
body: <p>This is a question to clarify the best method (or any method!) for achieving this.  It may be the way I'm trying to apply my .net coding experience to this new way of doing things but I cannot believe this is not a real world problem for many coders.</p>
  
  <p>So. Master view/viewmodel uses many sub views on the page as certain sections change depending on user choices/actions.  These sub views are composed into the master page:</p>
  
  <pre><code>&lt;div data-bind="compose: { model: articleSection, preserveContext: true }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>...and within the sub view I am able to refer to root observables that control the master view like so:</p>
  
  <pre><code>&lt;a href="#" class="btn" data-bind="css: { 'btn btn-default': true, 'btn-primary': $root.inEditMode() }, click: $root.setEditMode, enable: $root.articleSelected()"&gt;Edit&lt;/a&gt;
  </code></pre>
  
  <p>However, one of the sub views itself has a sub sub view which uses a custom binding and a template for construction as it's a treeview and needs to be able to recursively construct the layout.</p>
  
  <p>The sub view code is just:</p>
  
  <pre><code>&lt;div id="fancytree" data-bind="groupTree: treeGroups"&gt;
      &lt;!--&lt;ul data-bind="template: { name: 'itemTmpl', foreach: treeGroups }, groupTree: {}"&gt;&lt;/ul&gt;/--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The template is just:</p>
  
  <pre><code>    &lt;script id="itemTmpl" type="text/html"&gt;
        &lt;!-- Template used in labtool for tree--&gt;
          &lt;li&gt;
              &lt;span&gt;
                  &lt;span data-bind="text: name" /&gt;
              &lt;/span&gt;
              &lt;ul data-bind="template: { name: 'itemTmpl', foreach: children }"&gt;&lt;/ul&gt;
          &lt;/li&gt;
      &lt;/script&gt;  
  </code></pre>
  
  <p>The custom binding is:</p>
  
  <pre><code>ko.bindingHandlers.groupTree = {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          var tm = valueAccessor();
          var tmUnwrapped = tm();
          $(element).fancytree({
              minExpandLevel: 1,
              source: tmUnwrapped,
              lazyload: function (e, data) {
                  data.result = datacontext.getGroupChildren('1111');
              },
              activate: function (event, data) {
                  var node = data.node;
                  var tg = rootVm.selectedGroupId();
                  alert(node.title);
              },
          })
      }
  </code></pre>
  
  <p>So my problem is that I cannot get at what I think of as a "global variable" from my .net days which is an observable in my top-level root viewmodel called "selectedArticle".  When a user clicks on the tree view node, the "activate" function is fired, the alert pops up with the correct details and I simply want to be able to put that value into the observable in my root viewmodel which is, effectively, two levels up from the binding context of the custom binding handler.</p>
  
  <p>This HAS to be something that other people do, surely?  I've googled until I'm blue in the face but I'm obviously missing the keywords or concepts I need to get the hits I need.  In pseudo-code in the custom binding "activate" function I simply want to be able to type in something like "root.selectedArticle = node.title" but obviously root is not available in that manner, so that's where I come unstuck!</p>