title: Twitter Bootstrap typeahead selection not bound by KnockoutJS
body: <p>Ok, I've fought with this issue for hours now and narrowed the issue to a very simple <a href="http://jsfiddle.net/codepic/3sAmN/" rel="noreferrer">Fiddle</a></p>
  
  <p>Problem is, that when I'm using twitter bootstrap's typeahead plugin on a text input and make a selection, the value doesn't update in the KnockoutJS ViewModel. I know I could hack it to work but there must be something that I'm missing here.</p>
  
  <p>Basically what I have is:</p>
  
  <p><strong>Knockout Binding</strong></p>
  
  <pre><code>// Bind twitter typeahead
  ko.bindingHandlers.typeahead = {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          var $element = $(element);
          var allBindings = allBindingsAccessor();
          var typeaheadArr = ko.utils.unwrapObservable(valueAccessor());
  
          $element.attr("autocomplete", "off")
                  .typeahead({
                      'source': typeaheadArr,
                      'minLength': allBindings.minLength,
                      'items': allBindings.items,
                      'updater': allBindings.updater
                  });
      }
  };
  </code></pre>
  
  <p><strong>Knockout ViewModel</strong></p>
  
  <pre><code>function MyModel(){
      var self = this;
      self.productName = ko.observable();
      self.availableProducts = ['One', 'Two', 'Three'];
  }
  
  ko.applyBindings(new MyModel());
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="text" data-bind="typeahead:availableProducts, value:productName"/&gt;
  </code></pre>
  
  <p>The rest of the stuff is simply coming from Twitter Bootstrap.</p>