Using Knockout.js, Jquery Dialog and Jquery-UI for a Dialog Popup

Ever since I started playing with Knockout.js several months ago, I can’t get enough. Where have you been all my programming days? There does not seem to be any limitation (I am sure there are) only opportunities. I decided to use knockout to control a CRUD project which has a popup dialog for adding or editing a record. It is not as straight forward as it should be but then again you know this because you are here. Adding to this, implementing Jquery-UI together and all this has to be done in the right order with the right syntax. Enjoy and drop me a note if you can improve this! See comments in the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
  	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>         
	<!--This should be obvious-->
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
	<!--Jquery-UI-->
 <script src="knockout-latest.js"></script>                             <!--Latest Version of Knockout.js-->
<script src="knockout-jqueryui.min.js"></script>                       <!--Knockout - jqueryui Binding --><br />
 <form id="form1" runat="server">
<div>
<button data-bind="click: $root.DialogOpen">Open</button>
      <!--Binding of Button-->     
	</div>
<!--This is the dialog pop up window for editing and adding an existing item -->    
<div id="dialog" data-bind="dialog: { 'autoOpen': false, 'title': DialogTitle, 'width': '500px', 'modal': 'true' }, dialogVisible: isDialogOpen">
<fieldset>
<label for="txtEquipID">Id:</label>
         <input type="text" id="txtEquipID" data-bind="value: EquipID" disabled="disabled" class="text ui-widget-content ui-corner-all" />
</fieldset>
       
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                    <div class="ui-dialog-buttonset">
                        <!-- <button data-bind="click :$root.save">Save</button> -->
<input type="button" data-bind="button: { text: 'Cancel', label: 'Cancel' }, click: DialogClose" /> <!--Closes the dialog-->
                        <!--<button data-bind="click: $root.update">Update</button>-->
</div>
	</div>
</div>
 </form>
</body>
<script type="text/javascript"> 
  //This handles all of the heavy lifting when it comes to opening and closing the dialog
ko.bindingHandlers.dialog = {
init: function (element, valueAccessor, allBindingsAccessor)
              var options = ko.utils.unwrapObservable(valueAccessor()) || {};
              //do in a setTimeout, so the applyBindings doesn't bind twice from element being copied and moved to bottom
setTimeout(function () {
                  options.close = function () {
                      allBindingsAccessor().dialogVisible(false);
                  };
                 $(element).dialog(ko.toJS(options));
              }, 0);             

	 //handle disposal (not strictly necessary in this scenario
              ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                  $(element).dialog("destroy");
              });
          },
          update: function (element, valueAccessor, allBindingsAccessor) {
              var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
                  $el = $(element),
                  dialog = $el.data("uiDialog") || $el.data("dialog"),
                  options = valueAccessor();
              //don't call dialog methods before initialization
              if (dialog) {
                  $el.dialog(shouldBeOpen ? "open" : "close");
                  for (var key in options) {
                      if (ko.isObservable(options[key])) {
                          $el.dialog("option", key, options[key]());
                      }
            }
       }
 }
      };

      /* -Standard knockout - */
     var EqpViewModel = function () {
          var self = this;
          //****These are bindings necessary to help with the Dialog Box     *****
         //**** which allows opening and closing it.                       	 *****
         self.isDialogOpen = ko.observable(false);
          self.DialogOpen =              function () {
                  self.isDialogOpen(true);
              }          
self.DialogClose =
              function () {
                  self.isDialogOpen(false);
              }
          //Title of the Dialog Popup Window
          self.DialogTitle = ko.observable("Update Equipment")
          //This sets the values if someone opens up a 'Add New
          self.DialogNewOpen = function () {
              self.EquipID("0")
              self.isDialogOpen(true)
          }
          self.EquipID = ko.observable("0");
                }
      ko.applyBindings(new EqpViewModel());
 </script>
</html>

code files: knockout-and-jquery-modal.zip

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


5 − 4 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>