Edit Castings

castings

by msell

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
 <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<div class="row">
   <div class="offset1 span5">
      <form data-bind="submit: addCategory">
      <fieldset>
         <legend>Casting</legend>
         <p>
            Name
         </p>
         <p>
            <input type="text" data-bind="value: name" />
         </p>
         <p>
            Description
         </p>
         <p>
            <input type="text" data-bind="value: description" />
         </p>
         </fieldset>
          <fieldset>
              <legend>Categories</legend>
         <input type="text" data-bind='value: categoryToAdd, valueUpdate: "afterkeydown"' />
         <button type="submit" data-bind="enable: categoryToAdd().length > 0, click: addCategory">
            Add</button>
         <ul data-bind="foreach: categories">

        <li>
            <span data-bind="text: description"></span>
        </li>
    </ul>
         <p>
            <button type="submit" class="btn btn-primary">
               <i class="icon-plus icon-white"></i>Create
            </button>
             <button type="submit" data-bind="click: save" class="btn btn-primary">JSON
            </button> 
         </p>
                  <textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>
      </fieldset>
      </form>
   </div>

</div>

JavaScript

function Category(description) {
    this.description = description;
};

var viewModel = {
    name: ko.observable(''),
    description: ko.observable(''),
    categories: [],
    categoryToAdd: ko.observable(''),
    removeCategory: function(category) {
        this.categories.remove(category);
    },

    addCategory: function() {

        this.categories.push(new Category(this.categoryToAdd()));
        this.categoryToAdd('');
    }
};

self.save = function() {
    self.lastSavedJson(JSON.stringify(ko.toJS(self.viewModel), null, 2));
};

self.lastSavedJson = ko.observable("");


ko.applyBindings(viewModel);