<!DOCTYPE html>
<html>
<head>
<script data-require="knockout@2.2.1" data-semver="2.2.1" src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul data-bind="foreach:people">
<li data-bind="text:firstname,attr:{title:lastname}"></li>
</ul>
<div data-role="add a new person" data-bind="with:newPerson">
<input data-bind="value:firstname,valueUpdate:'afterkeydown'"/>
<span data-bind="text:firstname"></span>
<div data-bind="text:fullname"></div>
<input type="button" data-bind="click:$root.addPerson" value="add"/>
<!-- sample complex binding -->
<div data-bind="text:fullname,attr:{title:fullname,'data-id':personId},click:$root.addPerson"></div>
<!-- end samples -->
</div>
<script src="script.js"></script>
</body>
</html>
var PersonModel=function(first,last){
var self=this;
self.personId=ko.observable();
self.firstname=ko.observable(first);
self.lastname=ko.observable(last);
self.fullname=ko.computed(function(){
return self.firstname()+' '+self.lastname();
});
};
var PeopleModel=function(){
var self=this;
self.newPerson=ko.observable(new PersonModel('bob','knoblin'));
self.people=ko.observableArray();
self.addPerson=function(){
self.people.push(self.newPerson());
self.newPerson(new PersonModel('jane','dough'));
};
};
var komodel=new PeopleModel();
ko.applyBindings(komodel);
/* Styles go here */