title: A custom bindingHandler's return value/observable
body: <p>I have not been able to find a solution for this.</p>
  
  <p>I'm trying to create a custom bindingHandler for a click event on an html element <em>div</em> tag. </p>
  
  <pre><code>// custom bindingHandler and observable
  &lt;div data-bind="OnClickEvent: HasBeenClicked"&gt;&lt;/div&gt;
  // to show observable's true/false value
  &lt;span data-bind="text: 'Observable: ' + HasBeenClicked()"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>This bindingHandler does what it is suppose to, if you click on the <em>div</em> the text will change. However, the observable says if <strong>false</strong>.</p>
  
  <pre><code>ko.bindingHandlers.OnClickEvent = {
      update: function (element, valueAccessor) {
  
          $(element).text('Click Here: false');
  
          var observable = ko.utils.unwrapObservable(valueAccessor());
  
          $(element).on('click', function () {
  
              observable = !observable;
  
              if (observable) {
                  $(element).text('Click Here: true');
              } else {
                  $(element).text('Click Here: false');
              }
          });
      }
  }
  
  
  function ViewModel() {
      var self = this;
      self.HasBeenClicked = ko.observable(false);
  }
  
  ko.applyBindings(new ViewModel());
  </code></pre>
  
  <p>How do I set the observable <strong>HasBeenClicked</strong> to switch between true/false on every click, like the text?</p>