Contacts
 
      
 
      
  
          Add a contact          Save to JSON 
  

var viewModel = {
        contacts: new ko.observableArray([         { firstName: "Danny", lastName: "LaRusso", phones: [             { type: "Mobile", number: "(555) 121-2121" },             { type: "Home", number: "(555) 123-4567"}]         },         { firstName: "Sensei", lastName: "Miyagi", phones: [             { type: "Mobile", number: "(555) 444-2222" },             { type: "Home", number: "(555) 999-1212"}]         }     ]),     addContact: function () {
            viewModel.contacts.push({ firstName: "", lastName: "", phones: [] });     },     removeContact: function (contact) {
            viewModel.contacts.remove(contact);     },     addPhone: function (contact) {
            contact.phones.push({ type: "", number: "" });         viewModel.contacts.valueHasMutated();     },     removePhone: function (contact, phone) {
            ko.utils.arrayRemoveItem(contact.phones, phone);         viewModel.contacts.valueHasMutated();     },     save: function () {
            viewModel.lastSavedJson(JSON.stringify(viewModel.contacts(), null, 2));     },     lastSavedJson: new ko.observable("") }; ko.applyBindings(viewModel);

      
 
       
     You have asked for   gift(s)
 
       
         
          
           
Gift name
           
Price
           
          
         
         
         
        
 
            Add Gift 
            Submit 
      
 

var viewModel = {
        gifts: ko.observableArray([         { name: "Tall Hat", price: "39.95" },         { name: "Long Cloak", price: "120.00" }     ]),     addGift: function () {
    this.gifts.push({ name: "", price: "" });     },     removeGift: function (gift) {
    this.gifts.remove(gift);     },     save: function (form) {
            alert("Could now transmit to server: " + ko.utils.stringifyJson(this.gifts)); // To transmit to server, write this: ko.utils.postJson($("form")[0], this.gifts);     } }; ko.applyBindings(viewModel); $("form").validate({ submitHandler: function () { viewModel.save() } });

      
 
       
         
          
           
Category
           
Product
           
Price
           
Quantity
           
Subtotal
           
          
         
         
         
        
 
       
         Total value:  
 
                Add product 
                Submit order 
      
 

function formatCurrency(value) { return "$" + value.toFixed(2); } var cartLine = function () {
    this.category = ko.observable(); this.product = ko.observable(); this.quantity = ko.observable(1); this.subtotal = ko.dependentObservable(function () {
    return this.product() ? this.product().price * parseInt("0" + this.quantity(), 10) : 0;     } .bind(this)); // Whenever the category changes, reset the product selection     this.category.subscribe(function () { this.product(undefined); } .bind(this)); }; var cart = function () {
    // Stores an array of lines, and from these, can work out the grandTotal     this.lines = ko.observableArray([new cartLine()]);   // Put one line in by default        this.grandTotal = ko.dependentObservable(function () {
    var total = 0; for (var i = 0; i < this.lines().length; i++)             total += this.lines()[i].subtotal(); return total;     } .bind(this)); // Operations     this.addLine = function () { this.lines.push(new cartLine()) }; this.removeLine = function (line) { this.lines.remove(line) }; this.save = function () {
    var dataToSave = $.map(this.lines(), function (line) {
    return line.product() ? { productName: line.product().name, quantity: line.quantity()} : undefined         });         alert("Could now send this to server: " + JSON.stringify(dataToSave));     }; }; var cartViewModel = new cart(); ko.applyBindings(cartViewModel, document.getElementById("cartEditor"));

      
            Loading...
      
 
      
 
       
 
                     Delete 
                     Save 
          
       
 
       
         Currently viewing           user(s):
 
       
 
       
 
       
 
                 Add user: 
         
                 Add 
       
 
      
 
      
 
      
  

// The view model holds all the state we're working with. It also has methods that can edit it, and it uses // dependentObservables to compute more state in terms of the underlying data // -- // The view (i.e., the HTML UI) binds to this using data-bind attributes, so it always stays up-to-date with // the view model, even though the view model does not know or care about any view that binds to it var viewModel = {
        savedLists: ko.observableArray([         { name: "Celebrities", userNames: ['JohnCleese', 'MCHammer', 'StephenFry', 'algore', 'StevenSanderson'] },         { name: "Microsoft people", userNames: ['BillGates', 'shanselman', 'haacked', 'ScottGu'] },         { name: "Tech pundits", userNames: ['Scobleizer', 'LeoLaporte', 'techcrunch', 'BoingBoing', 'timoreilly', 'codinghorror'] }     ]),     editingList: {
            name: ko.observable("Tech pundits"),         userNames: ko.observableArray()     },     userNameToAdd: ko.observable(""),     currentTweets: ko.observableArray([]) }; viewModel.findSavedList = function (name) {
    var lists = this.savedLists(); for (var i = 0; i < lists.length; i++) if (lists[i].name === name) return lists[i]; }; // Methods viewModel.addUser = function () {
    if (this.userNameToAdd() && this.userNameToAddIsValid()) {
    this.editingList.userNames.push(this.userNameToAdd()); this.userNameToAdd("");     } } viewModel.saveChanges = function () {
    var saveAs = prompt("Save as", this.editingList.name()); if (saveAs) {
    var dataToSave = this.editingList.userNames().slice(0); var existingSavedList = this.findSavedList(saveAs); if (existingSavedList)             existingSavedList.userNames = dataToSave; // Overwrite existing list         else this.savedLists.push({ name: saveAs, userNames: dataToSave }); // Add new list this.editingList.name(saveAs);     } } viewModel.deleteList = function () {
    var nameToDelete = this.editingList.name(); var savedListsExceptOneToDelete = $.grep(this.savedLists(), function (list) { return list.name != nameToDelete }); this.editingList.name(savedListsExceptOneToDelete.length == 0 ? null : savedListsExceptOneToDelete[0].name); this.savedLists(savedListsExceptOneToDelete); }; ko.dependentObservable(function () {
    // Observe viewModel.editingList.name(), so when it changes (i.e., user selects a different list) we know to copy the saved list into the editing list     var savedList = viewModel.findSavedList(viewModel.editingList.name()); if (savedList) {
    var userNamesCopy = savedList.userNames.slice(0);         viewModel.editingList.userNames(userNamesCopy);     } else         viewModel.editingList.userNames([]); }); viewModel.hasUnsavedChanges = ko.dependentObservable(function () {
    if (!this.editingList.name()) return this.editingList.userNames().length > 0; var savedData = this.findSavedList(this.editingList.name()).userNames; var editingData = this.editingList.userNames(); return savedData.join("|") != editingData.join("|"); }, viewModel); viewModel.userNameToAddIsValid = ko.dependentObservable(function () {
    return (this.userNameToAdd() == "") || (this.userNameToAdd().match(/^\s*[a-zA-Z0-9_]{1,15}\s*$/) != null); }, viewModel); // The active user tweets are (asynchronously) computed from editingList.userNames ko.dependentObservable(function () {
        twitterApi.getTweetsForUsers(this.editingList.userNames(), function (data) { viewModel.currentTweets(data) }) }, viewModel); ko.applyBindings(viewModel); // Using jQuery for Ajax loading indicator - nothing to do with Knockout $(".loadingIndicator").ajaxStart(function () { $(this).fadeIn(); })                       .ajaxComplete(function () { $(this).fadeOut(); });