Knockout.js, jQuery UI, editable observableArray list

Short note about implementing most usefull knockout use case - editable list.

So we have list of items, and want to do some CRUD on it.

Here is sample code:

<!DOCTYPE html>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="components/jquery-ui/themes/base/jquery.ui.all.css" />
    <link rel="stylesheet" href="components/bootstrap/docs/assets/css/bootstrap.css" />
    <div class="container">
      <table class="table">
        <tbody data-bind="foreach: items">
            <td data-bind="text: id"></td>
            <td data-bind="text: name"></td>
            <td data-bind="text: price"></td>
              <!-- call to editItem must be exactly the same, otherwise there will be event as second argument, look to addItem and editItem methods -->
              <a href="#" class="btn btn-mini" data-bind="click: function(){$parent.editItem($data);}">Edit</a>
              <a href="#" class="btn btn-mini" data-bind="click: function(){$parent.removeItem($data);}">Delete</a>

      <a href="#" class="btn btn-block" data-bind="click: addItem">Add Item</a>

      <div id="editDisplay" class="form-horizontal" style="display:none">
        <div class="control-group">
          <label class="control-label">id</label>

          <div class="controls">
            <input class="input-block-level" type="number" data-bind="value:" disabled />

        <div class="control-group">
          <label class="control-label">name</label>

          <div class="controls">
            <input class="input-block-level" type="text" data-bind="value:" />

        <div class="control-group">
          <label class="control-label">price</label>

          <div class="controls">
            <input class="input-block-level" type="number" data-bind="value: editor.price" />

    <script type="text/javascript" src="components/jquery/jquery.js"></script>
    <script type="text/javascript" src="components/jquery-ui/ui/jquery-ui.custom.js"></script>
    <script type="text/javascript" src="components/knockout/build/output/knockout-latest.debug.js"></script>

    <script type="text/javascript">
      // Our KISS item modell
      function Item(id, name, price) { = ko.observable(id) = ko.observable(name)
        this.price = ko.observable(price)

      function List() {
        var self = this

        self.items = ko.observableArray([new Item(1, 'one', 5.5), new Item(2, 'two', 7.25), new Item(3, 'three', 4.75)])

        self.addItem = function () {
          // Here we create new item with default parameters
          // and call editItem for it
          // notice second argument wich is boolean
          // indicating that this is new item
          // IMPORTANT: in template you MUST use folow:
          // data-bind="click: function(){$parent.editItem($data);}"
          // otherwise it will pass event as second argument
          var item = new Item(0, 'default', 0)
          self.editItem(item, true)

        self.removeItem = function (item) {

        // dummy item model for editor
        self.editor = new Item()

        self.editItem = function (item, isNew) {
          // populate editor values


          // create dialog
            modal: true,
            resizable: false,
            width: 400,
            buttons: {
              Accept: function () {
                //TODO: validate here


                // save values from editor to item

                // and add it if it is new one
                if (isNew) {
              Cancel: function () {

      ko.applyBindings(new List())

And here is live demo: