title: Knockout and jQuery dialog - When view model binding context is not document.body?
body: <p>Say that we have a simple model and view model:</p>
  
  <pre><code>// Model
  function Model(prop) {
       this.Prop = ko.observable(prop);
  }
  
  // View Model
  function ViewModel(){
       var self = this;
  
       this.CurrentItem = ko.observable(new Model("abc"));
  
       this.Edit = function(){
            $(#"EditDiv").dialog("show");
       }
  }
  </code></pre>
  
  <p>Then the html:</p>
  
  <pre><code>&lt;body&gt;
        &lt;input type="button" data-bind="click: Edit"/&gt;
        &lt;div id="EditDiv" data-bind="with: CurrentItem"&gt;
           &lt;input type="text" data-bind="value: Property" /&gt;
        &lt;/div&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p>Then the script at the bottom of the page:</p>
  
  <pre><code>$(document).ready(function(){
        $("#EditDiv").dialog({ /* settings to hide it first. */ });
  
        ko.applyBindings(new ViewModel());
  });
  </code></pre>
  
  <p>The above code works, and will pop up a jQuery window with a text box with text "abc".</p>
  
  <p>However, if I divide the page in divs and assign a different model view to each div, the binding breaks:</p>
  
  <pre><code>&lt;body&gt;
       &lt;div id="ForAnotherBindingContextDiv"&gt;
       &lt;/div&gt;
       &lt;div id="TargetContextDiv"&gt;
            &lt;input type="button" data-bind="click: Edit"/&gt;
            &lt;div id="EditDiv" data-bind="with: CurrentItem"&gt;
                &lt;input type="text" data-bind="value: Property" /&gt;
            &lt;/div&gt;  
       &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>So now we change the binding to:</p>
  
  <pre><code>ko.applyBindings(new ViewModel(), $("#TargetContextDiv")[0]);
  </code></pre>
  
  <p>The above will still popup the edit window, however, the text box is empty. To me, this looks like the binding is broken because jQuery places the entire dialog setup at the document's root level when we call .dialog("show"), which is now outside the context of the <code>ViewModel</code>.</p>
  
  <p>Does jQuery have an option for not putting the whole dialog fix at the root level? Is there a different approach that I can take? (I also tried the custom binding route, and it wouldn't bind either. It works if the contents of such a div is static (without bindings), like an error message text).</p>