JQuery Mobile ListView with data-bind

https://groups.google.com/d/topic/knockoutjs/8fIKWQDQOhQ/discussion

by olli

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<ul id="listview" data-bind="foreach: people" data-role="listview" data-inset="true"> 
    <li><a href="#" data-bind="text: name"></a></li> 
</ul> 

<button data-bind="click: addPerson">Add Person</button>

<button data-bind="click: listviewRefresh">Listview Refresh</button>

CSS

.error {color:#990000;}
.bold {font-weight:bold}

JavaScript

var Person = function(id, name) {
    this.id = id;
    this.name = ko.observable(name);
};

var ViewModel = function(people) {
    var self = this;
    this.people = ko.observableArray(people);
    this.addPerson = function() {
        self.people.push(new Person(0, "new"));
    };
     this.listviewRefresh= function() {
        $("#listview").listview('refresh');
    };
};

ko.applyBindings(new ViewModel([new Person(1, "Bob"), new Person(2, "Ted")]));