title: Knockout component given incorrect binding context in Internet Explorer 11
body: <p>I have a bug that I have tested in Internet Explorer and Chrome and this only happens in Internet Explorer.</p>
  
  <p>I am using <code>Knockout-3.3.0</code> and <code>Knockout Validation</code>.</p>
  
  <p>I have a knockout component that uses a custom element similar to the below:</p>
  
  <pre><code>&lt;div&gt;
  
      ...
  
      &lt;div data-bind="with: editableUser"&gt;
          &lt;div data-bind="visible: !$parent.editMode"&gt;
              &lt;user-picker params="value: $parent.user, multiple:false, hideSelection:true"&gt;&lt;/user-picker&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      ...
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The custom element is a descendant of other nodes which are part of my view model as shown above.</p>
  
  <p>The scripts dependencies and view model bindings for the page are being applied as shown below:</p>
  
  <pre><code>&lt;script src="/Scripts/knockout-3.3.0.debug.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/knockout.validation.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/CustomBindings.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $(function() {
          ko.validation.init({
              insertMessages: false,
              decorateInputElement: false,
              errorElementClass: "has-error has-feedback",
              decorateElementOnModified: true
          });
      });
  &lt;/script&gt;
  
  &lt;script src="/Scripts/UserPicker.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/UserModel.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/CustomComponents.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var userModel;
      $(function() {
          var userRepository = new MyModule.UserRepository();
          userModel = new MyModule.UserModel(userRepository);
          ko.applyBindings(userModel);
      }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>The template for the component is rendered in an MVC section before the scripts; as shown below:</p>
  
  <pre><code>&lt;template id="user-picker-template"&gt;
      &lt;div class="user-picker"&gt; ... &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The component is registered in <code>CustomComponents.js</code> as shown.</p>
  
  <pre><code>ko.components.register('user-picker', {
      template: { element: 'user-picker-template' },
      viewModel: MyModule.UserPicker
  });
  </code></pre>
  
  <p>I also have custom knockout bindings in the <code>CustomBindings.js</code> file.</p>
  
  <p>When debugging Knockout the error occurs in this function <code>applyBindingsToNodeInternal</code> on this line:</p>
  
  <pre><code>var initResult = handlerInitFn(node, getValueAccessor(bindingKey), allBindings, bindingContext['$data'], bindingContext);
  </code></pre>
  
  <p>A javascript error is thrown during the <code>ko.applyBindings</code> call. </p>
  
  <p>The error is that the property in the first binding inside the <code>user-picker-template</code> is undefined, this is because the <code>bindingContext</code> being used is incorrect, the <code>userModel</code> is being passed instead of the <code>UserPicker</code>.</p>
  
  <p>Due to the error the remaining non component related bindings are completed and then the <code>user-picker</code> binding is completed correctly afterwards, but because of the javascript error, some callback code on my click events don't work.</p>
  
  <p>When debugging this in Chrome the binding for the user picker is ignored until after the <code>userModel</code> has been bound.</p>
  
  <p>Does anyone know what might be causing this error?</p>