title: Accessing Knockout Component ViewModel from CustomBinding
body: <p>I am trying to create a custom Knockout component to wrap around a Google Chart's graph (or any chart library for that matter). </p>
  
  <p>Ideally I would like to make a component with a viewmodel that holds the graph data. Once that component is bound using a custom binding, whenever the update function is called I would access that array with the data, add the new value, and tell the graph to redraw. </p>
  
  <p>The problem is when I am inside the update function of the bindinghandler, I cannot see the graph's view model. How can I access this?</p>
  
  <p>Component:</p>
  
  <pre><code>        ko.components.register('line-graph', {
          viewModel: function(params) {
              var self = this;
              self.data = new google.visualization.DataTable(
              {
                  cols: [{id: 'index', label: '', type: 'number'},
                         {id: 'value', label: '', type: 'number'}]
  
              }, 0.6);
              self.currentPoint = 1;
              self.lastValue = null;
          },
          template:
              '&lt;div&gt;&lt;/div&gt;'
          });
  </code></pre>
  
  <p>Binding:</p>
  
  <pre><code>ko.bindingHandlers.lineGraph = {
      init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
      },
      update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
           var observable = valueAccessor();
  
           if(observable != null){
               //Here, the viewmodel and all properties of the bindingContext correspond to the main viewmodel, not the graph's viewmodel
               viewModel.data.addRow([viewModel.currentPoint++, value]);
               drawChart();
           }
  
           viewModel.lastValue = value;
      }
  }
  </code></pre>
  
  <p>Update: Here is how I plan to use the binding. The pressureValue variable would be a value in my main viewmodel that is being updated constantly in the background.</p>
  
  <pre><code>&lt;line-graph data-bind="lineGraph: pressureValue"&gt;&lt;/line-graph&gt;
  </code></pre>
  
  <p>Any thoughts? Am I approaching this incorrectly?</p>