title: Adding an item to an observable array from a popup
body: <p>Ive been playing around with Knockout and i cant get my head around how to handle this scenerio.</p>
  
  <p>Basically i have a list of employees and you can choose a position for that employee from a select control.  Ive created a little popup window using jquery so that the user could add a new position.  This would then update the selects in the underlying page.  I can call the addPosition method of the viewmodel which adds a new position with some test data but i cant get my head around how i would populate it from the values in the popup's text fields. </p>
  
  <p>Here is my fiddle</p>
  
  <p><a href="http://jsfiddle.net/ricobano/HA5uz/3/" rel="nofollow">http://jsfiddle.net/ricobano/HA5uz/3/</a></p>
  
  <pre><code>&lt;div id="employeeWrapper"&gt;
      &lt;div data-bind="foreach: employees"&gt;
          &lt;div&gt;
              &lt;label&gt;Full Name&lt;/label&gt;
              &lt;input type="text" data-bind="value: fullName" /&gt;
              &lt;label&gt;Position&lt;/label&gt;
              &lt;select id="slTest" data-bind="options: $root.Positions, value:position, optionsText:'name'"&gt;&lt;/select&gt;
              &lt;label&gt;Salary:&lt;/label&gt;&lt;span data-bind="text: position().formatted"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button id="button"  data-bind="click: addEmployee"&gt;Add Employee&lt;/button&gt;
      &lt;button id="AddPosition" data-bind="click: open"&gt;Add Position&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div data-bind="dialog: {autoOpen: false, title: 'Dialog test' },  dialogVisible: isOpen"&gt;
      &lt;div&gt;
          &lt;label&gt;Name:&lt;/label&gt;&lt;input type="text"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;salary:&lt;/label&gt;&lt;input type="text"/&gt;
      &lt;/div&gt;
      &lt;button data-bind="click: addPosition"&gt;Add&lt;/button&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Heres my viewmodel</p>
  
  <pre><code>ko.bindingHandlers.dialog = {
      init:function(element, valueAccessor, allBindingsAccessor){
          var options = ko.utils.unwrapObservable(valueAccessor()) || {};
          setTimeout(function() { 
                  options.close = function() {
                      allBindingsAccessor().dialogVisible(false);                        
                  };
  
                  $(element).dialog(options);     
              }, 0); 
      },
       update: function(element, valueAccessor, allBindingsAccessor) {
              var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
                  $el = $(element),
                  dialog = $el.data("uiDialog") || $el.data("dialog")
  
              //don't call open/close before initilization
              if (dialog) {
                  $el.dialog(shouldBeOpen ? "open" : "close");
              }  
          }
  };
  
  function Employee(fullname, position) {
      var self = this;
      self.fullName = ko.observable(fullname);
      self.position = ko.observable(position);
  };
  
  function Position(data) {
      var self = this;
      self.id = ko.observable(data.id);
      self.name = ko.observable(data.name);
      self.salary = ko.observable(data.salary);
  
      self.formatted = ko.computed(function(){
          return "£" + self.salary();
      });
  };
  
  function EmployeeVM() {
      var self = this;
      self.employees = ko.observableArray();
      self.Positions = ko.observableArray([]);
      self.isOpen = ko.observable(false);
  
      var PositionsJSON = {
          json: $.toJSON([{
              "id": 1,
              "name" : "No position",
              "salary" : 0
          },{
              "id": 2,
              "name" : "Web Developer",
              "salary" : 15000           
          },{
              "id": 3,
              "name" : "Manager",
              "salary" : 30000           
          }])
      };
  
      var data = {
          json: $.toJSON([{
              "fullName": "Richard Banks",
                  "position": {
                      "id": 2
              }
          }, {
              "fullName": "Dave Grohl",
                  "position": {
                      "id": 3
              }
          }, {
              "fullName": "bobby rahul",
                  "position": {
                      "id": 3
              }
          }])
      };
  
      $.when(
          $.ajax({
              url: "/echo/json/",
              data: PositionsJSON,
              type: "POST"
          }),
          $.ajax({
              url: "/echo/json/",
              data: data,
              type: "POST"
          })
      ).done(function(positionArgs, EmployeeArgs){
          var ps = $.map(positionArgs[0], function(item){
              return new Position(item);
          });
  
          self.Positions(ps);
  
          $.each(EmployeeArgs[0], function (i, item) {
              var p = ko.utils.arrayFirst(self.Positions(), function(p){
                  return p.id() == item.position.id;
              });
  
              var e = new Employee(item.fullName, p);
              self.employees.push(e);
          });
      });
  
      self.addPosition = function(){
          self.Positions.push(new Position({id:"4", name:"Director", salary:"To much"}));
          self.isOpen(false);
      };
  
      self.addEmployee = function(){
          self.employees.push(new Employee("", self.Positions[0]));
      };
  
      self.open = function(){
          self.isOpen(true);
      };
  }
  
  ko.applyBindings(new EmployeeVM());
  </code></pre>