title: Knockoutjs custom bindinghandlers methods not firing
body: <p>I'm trying to make knockoutjs and bootstrap modals play together by creating a custom bindingHandler in knockout, but for some reason the bindingHandler init &amp; update functions never fire (i added prints to verify if this runs, which confirms it doesn't)</p>
  
  <p>Here's my bindingHandler declaration:</p>
  
  <pre><code>require(['jquery', 'knockout', 'restaurant/ViewModel', 'bootstrap'], function ($, ko, ViewModel) {
      console.log('running require');
  
      ko.bindingHandlers.modal = {
          init: function (element, valueAccessor) {
              console.log('initializing bootstrap modal');
              $('#restaurant-new-modal').modal();
          },
          update: function (element, valueAccessor) {
              console.log('unwrapped valueAccessor:' + ko.unwrap(valueAccessor()));
              if (ko.unwrap(valueAccessor())) {
                  $('#restaurant-new-modal').modal('show');
                  $('input#restaurant-new-name').focus();
              }
              else {
                  $('#restaurant-new-modal').modal('hide');
              }
          }
      };
  
      var viewModel = new ViewModel();
  
      $.ajax({
          url: 'http://localhost:8000/api/restaurants'
      }).done(function (data) {
          console.log('ajax query done');
          for (var i = 0; i &lt; data.length; i++) {
              viewModel.addRestaurantToList(data[i]);
          }
  
      }).fail(function () {
          console.log('AJAX query failed');
      });
  
      console.log('comes after ajax');
  
      ko.applyBindings(viewModel, $('#restaurant-list-wrapper')[0]);
  
  });
  </code></pre>
  
  <p>And my html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Restaurants&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css"/&gt;
      &lt;link type="text/css" rel="stylesheet" href="/css/style.css"/&gt;
      &lt;script data-main="/js/restaurant/main" src="/lib/requirejs/require.js" type="application/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Restaurants You Might Like&lt;/h1&gt;
  
  &lt;div id="restaurant-list-wrapper" style="display: none;" data-bind="visible: restaurantList().length &gt; 0"&gt;
      &lt;ul id="restaurant-list" data-bind="foreach: restaurantList"&gt;
          &lt;li class="restaurant"&gt;
              &lt;div class="restaurant-info"&gt;
                  &lt;span data-bind="text: 'Restaurant #' + $data.store.id() + ': '"&gt;&lt;/span&gt;
  
                  &lt;a href="#" data-bind="text: $data.store.name, visible: !isEditable()"&gt;&lt;/a&gt;
                  &lt;input class="restaurant-input" type="text"
                         data-bind="visible: isEditable(), textInput: $data.tempName"/&gt;
              &lt;/div&gt;
  
              &lt;div class="restaurant-action-bar"&gt;
                  &lt;a href="#" class="restaurant-update-button btn btn-success btn-sm"
                     data-bind="text: 'Update', visible: isEditable(), click: $root.updateHandler"&gt;&lt;/a&gt;
                  &lt;a href="#" class="restaurant-edit-button btn btn-primary btn-sm"
                     data-bind="text: isEditable() ? 'Cancel' : 'Edit', click: $root.editHandler"&gt;&lt;/a&gt;
                  &lt;a href="#" class="restaurant-delete-button btn btn-danger btn-sm"
                     data-bind="text: 'Delete', click: $root.deleteHandler"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="vertical-toolbar"&gt;
          &lt;a href="#" id="restaurant-new-button" class="glyphicon glyphicon-plus round green" data-bind="click: function() { showModal(true); }"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="restaurant-new-modal" class="modal fade" role="dialog" data-bind="modal: showModal"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title"&gt;Create New Restaurant&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-content"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;label for="restaurant-new-name"&gt;Enter new restaurant name&lt;/label&gt;&lt;input id="restaurant-new-name"
                                                                                               type="text"/&gt;
                      &lt;a href="#" class="btn btn-success btn-lg" data-bind="click: newHandler"&gt;Create&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any ideas?</p>