Demo - KnockoutJs - Complete

by rpallas

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<h2>Demo</h2>
Name: <input data-bind="value: message, valueUpdate: 'afterkeydown'" type="text"/>
<br />
<button data-bind="click: helloWorld" class="btn btn-primary">Hello World</button>
<button data-bind="click: addItem" class="btn btn-primary">Add to list</button>
<p data-bind="if: message">
    Hello <span data-bind="text: message"></span>
</p>
<fieldset>
    <legend>NHS Choices Projects</legend>
    <ul data-bind="foreach: listItems">
        <li>
            <span data-bind="text: name"> </span>
            <a data-bind="click: $parent.removeItem">Remove</a>
        </li>            
    </ul>    
</fieldset>

<h3>Debug</h3>
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

CSS

body {margin: 15px;}
.btn {margin: 5px 0;}

JavaScript

$(function() {
    
    // 1. Create your ViewModel
    function viewModel() {
        var self = this;
        
        self.message = ko.observable("");
        self.listItems = ko.observableArray([
            {name: 'Pims'}, 
            {name: 'Scorecard'}, 
            {name: 'ISFP'}]);
        self.helloWorld = function() {
            this.message("World");   
        };
        self.addItem = function() {
            if(self.message()) {
                self.listItems.push({name: self.message()});
            }
        };
        self.removeItem = function() {
            self.listItems.remove(this);
        };
    }
  
    // 2. Apply the bindings
    ko.applyBindings(new viewModel());
    
});