title: Knockout in Dialog to ASP MVC issues
body: <p>I am new to KnockoutJS, and am having some issues understanding the best approach to utilize Knockout's databinding.  <a href="http://jsfiddle.net/timotheusg/8c8xhf55/" rel="nofollow">Fiddle</a></p>
  
  <p>My current project uses a dialog popup to then populate things like tables of values.  But currently, I only copy the value over from the dialog to the tables by pushing the values to a Knockout observableArray.  There must be a way to streamline this process some more (I have at least 8 more of these types of dialogs, some with 15+ fields!)  </p>
  
  <pre><code>&lt;h4&gt;Affiliations&lt;/h4&gt;
  &lt;table id="AffiliationsTable" data-bind="foreach: affiliations"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;Organization Name&lt;/td&gt;
              &lt;td&gt;Affiliation Role&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input data-bind="value: OrganizationName, attr: {name: 'Affiliations[' + $index() + '].OrganizationName'}"&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input data-bind="value: AffiliationRole, attr: {name: 'Affiliations[' + $index() + '].AffiliationRole'}"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div id="dialogAffiliation" data-bind="dialog: {autoOpen: false, title: 'Affiliation' }, dialogVisible: isOpen"&gt;
      &lt;label for="OrganizationName"&gt;Organization Name&lt;/label&gt;
      &lt;input type="text" name="OrganizationName" value="" class="text ui-widget-content ui-corner-all" id="OrganizationNameInsert"&gt;
      &lt;label for="AffiliationRole"&gt;Affiliation Role&lt;/label&gt;
      &lt;input type="text" name="AffiliationRole" value="" class="text ui-widget-content ui-corner-all" id="AffiliationRoleInsert"&gt;&lt;br /&gt;
      &lt;button data-bind="click: addAffiliation"&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;button data-bind="click: open"&gt;Add Affiliations&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The KO code is hopefully where the biggest changes would be made, but I can't seem to think of an improvement.  Maybe populating the dialog with an observable that gets moved to the table DOM on save-click.  Or something smarter than that.  Any advice would be appreciated!</p>
  
  <pre><code>var viewModel = function() {
      var self = this;
      self.isOpen = ko.observable(false);
      self.open = function () {
          this.isOpen(true);
      };
      self.close = function () {
          this.isOpen(false);
      };
      self.affiliations = ko.observableArray([
              { OrganizationName: ko.observable('name'), AffiliationRole: ko.observable("role")}, { OrganizationName: ko.observable('name2'), AffiliationRole: ko.observable("role2") }
      ]);
  
      self.addAffiliation = function () {
          self.affiliations.push({ OrganizationName: document.getElementById("OrganizationNameInsert").value, AffiliationRole: document.getElementById("AffiliationRoleInsert").value });
          $("#dialogAffiliation").dialog('close');
      };
  };
  
  ko.applyBindings(new viewModel());
  </code></pre>
  
  <p><a href="http://jsfiddle.net/timotheusg/8c8xhf55/" rel="nofollow">http://jsfiddle.net/timotheusg/8c8xhf55/</a></p>