KO Fundamentals

by lazyberezovsky

HTML

Name: <input id='guest-name' type='text' data-bind='value: guest, valueUpdate: "afterkeydown"'/>
<input type='checkbox' data-bind='checked: showGreetings'/>
<ul data-bind='foreach: people'>
    <li><span data-bind='text: name'/></li>
</ul>
<p data-bind='visible: showGreetings'>
    <span data-bind='text: greetings'></span> <span data-bind='text: guest'></span>
    <div><input type='radio' name='greetingsGroup' value='hello' data-bind='checked: greetings'/>Hello</div>
    <div><input type='radio' name='greetingsGroup' value='yo' data-bind='checked: greetings'/>Yo!</div>
    <div><input type='radio' name='greetingsGroup' value='hi' data-bind='checked: greetings'/>Hi</div>
</p>

CSS

#guest-name {
    background: #FFCC66;
    border:none;
    padding: 2px;
}

ul {
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
}

ul li:hover {
    color: orange;
    cursor: pointer;
}

JavaScript

var data = [ { name: 'Bob' }, { name: 'John' } ];

var ViewModel = function(people) {
   var self = this;
   self.guest = ko.observable('guest');
   self.people = ko.observableArray(people);
   self.showGreetings = ko.observable(true);
    self.greetings = ko.observable('yo');   
};

ko.applyBindings(new ViewModel(data));