title: Bind modal data to knockout model
body: <p>I'm trying to have a twitter bootstrap modal open to a window that has a text area in it which is editable, then on save, it saves the appropriate data. My current code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table  class="display table table-striped"&gt;
      &lt;tbody data-bind="foreach: entries"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Placeholder
              &lt;/td&gt;
              &lt;!-- ko foreach: entry_data --&gt;
              &lt;td&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input type="text" class="form-control col-sm-2" data-bind="value: entry_hours"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;a class="comment" data-bind="click: function() { $root.modal.comment($data); $root.showModal(); }, css: { 'has-comment': comment.length &gt; 0, 'needs-comment': comment.length == 0 }, attr: { title: comment }"&gt;&lt;span class="glyphicon glyphicon-comment"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;!-- /ko --&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;!-- Modal template --&gt;
  &lt;script id="commentsModal" class="modal-dialog" type="text/html"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-bind="click:close" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 data-bind="html:header" class="modal-title"&gt;&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;textarea class="form-control" rows="3" data-bind="value: $root.modal.comment.comment"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-bind="click:close,html:closeLabel"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary" data-bind="click:action,html:primaryLabel" id="save-changes"&gt;Save changes&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!-- /.modal-content --&gt;
  &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/script&gt;
  
  &lt;!-- Create a modal via custom binding --&gt;
  
  &lt;div data-bind="bootstrapModal:modal" class="modal fade" id="commentsModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>/* Custom binding for making modals */
  ko.bindingHandlers.bootstrapModal = {
      init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          var props = valueAccessor(),
              vm = bindingContext.createChildContext(viewModel);
          ko.utils.extend(vm, props);
          vm.close = function() {
              vm.show(false);
              vm.onClose();
          };
          vm.action = function() {
              vm.onAction();
          }
          ko.utils.toggleDomNodeCssClass(element, "modal fade", true);
          ko.renderTemplate("commentsModal", vm, null, element);
          var showHide = ko.computed(function() {
              $(element).modal(vm.show() ? 'show' : 'hide');
          });
          return {
              controlsDescendantBindings: true
          };
      }
  }
  
  var entriesdata = [{"entry_id":"51794","project_id":"2571","user_id":"89","entry_data":[{"entry_data_id":"359192","entry_id":"51794","entry_hours":"0.00","entry_date":"2013-12-22","comment":""},{"entry_data_id":"359193","entry_id":"51794","entry_hours":"8.00","entry_date":"2013-12-23","comment":"Test comment"},{"entry_data_id":"359194","entry_id":"51794","entry_hours":"8.00","entry_date":"2013-12-24","comment":"Test comment"},{"entry_data_id":"359195","entry_id":"51794","entry_hours":"0.00","entry_date":"2013-12-25","comment":""},{"entry_data_id":"359196","entry_id":"51794","entry_hours":"8.00","entry_date":"2013-12-26","comment":"Test comment"},{"entry_data_id":"359197","entry_id":"51794","entry_hours":"8.00","entry_date":"2013-12-27","comment":"Test comment"},{"entry_data_id":"359198","entry_id":"51794","entry_hours":"0.00","entry_date":"2013-12-28","comment":""}]}];
  var projectsdata = [{"project_txt":"Test Project","project_id":12345}];
  var TimeEntriesModel = function(entries, projects) {
      var self = this;
  
      self.projects = ko.observableArray(projects);
  
      self.entries = ko.observableArray(ko.utils.arrayMap(entries, function(entry) {
          return {
                  entry_id : entry.entry_id,
                  project_id : entry.project_id,
                  user_id : entry.user_id,
                  entry_data : ko.observableArray(entry.entry_data)
                  }
      }));
  
      self.save = function () {
          ko.utils.stringifyJson(self.entries);
  
      }
  
      self.modal = {
          header: "Add/Edit Comment",
          comment: ko.observableArray([{comment: "test"}]),
          closeLabel: "Cancel",
          primaryLabel: "Save",
          show: ko.observable(false), /* Set to true to show initially */
          onClose: function() {
              self.onModalClose();
          },
          onAction: function() {
              self.onModalAction();
          }
      }
      console.log(ko.isObservable(self.modal.comment));
      self.showModal = function() {
          self.modal.show(true);
      }
  
      self.onModalClose = function() {
          // alert("CLOSE!");
      }
      self.onModalAction = function() {
          // alert("ACTION!");
          self.modal.show(false);
      }
  
  }
  
  ko.applyBindings(new TimeEntriesModel(entriesdata, projectsdata));
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/sL3HK/" rel="noreferrer">http://jsfiddle.net/sL3HK/</a></p>
  
  <p>As you can see in the fiddle, the modal opens with the text box, but I'm unable to figure out how to get the 'comment' text into the modal or update the comment when the 'save' button is pressed.</p>
  
  <p>Any ideas?</p>
  
  <p>Also, I'm very new to Knockout, so if there's anything in there that doesn't look quite right, please feel free to correct me on it.</p>
  
  <p>UPDATE:</p>
  
  <p>I've been fiddling with the code, and have been able to get the "comment" into the modal, but I've not been able to successfully update it up to this point. And another problem I will eventually run into is that I only want the comment to be updated when "Save" is clicked, rather than the normal update on blur. I really think I'm going about this the wrong way, but I'm not sure what the <em>right</em> way is. Any more help is greatly appreciated.</p>
  
  <p><a href="http://jsfiddle.net/Qyqve/" rel="noreferrer">Updated fiddle.</a></p>