title: KnockoutJS: Access to observable Variable outside of an custom component
body: <p>I already searched a lot but cannot figure out how to handle my issue.
  I created a custom component and the template is within a <code>&lt;script type="text/html"&gt;&lt;/script&gt;</code> Tag. Outside of this template I have a variable which I try to manipulate after doing something. This doesn't work, it's not defined. Is there any possibility to manipulate that observable?</p>
  
  <p>My code looks like this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;customcomponent&gt;&lt;/customcomponent&gt;
  &lt;script type="text/html" id="customcomponent-tpl"&gt;
      &lt;span data-bind="text: foo"&gt;Foo&lt;/span&gt;
      &lt;span data-bind="text: bar"&gt;Bar&lt;/span&gt;
  &lt;/script&gt;
  &lt;span data-bind="text: foobar"&gt;Foobar&lt;/span&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var customComponentViewModel = function() {
      this.foo = ko.observable();
      this.bar = ko.observable();
      this.foobar = ko.observable();
  
      this.foo('Foo!');
      this.bar('Bar!');
      this.foobar('Foo! Bar!');
  
  
      console.log(this.foo());
      console.log(this.bar());
      console.log(this.foobar());
  };
  
  // do another stuff...
  
  /**
   * Register KO component
   */
  
  ko.components.register('customcomponent', {
      viewModel: customComponentViewModel,
      template: {
          element: 'customcomponent-tpl'
      }
  });
  
  ko.applyBindings();
  </code></pre>
  
  <p>Many thanks in advance!</p>
  
  <p>Matthias</p>