jQuery UI widget with KO

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-1.3.almost.beta..js"></script>
<div id="widget">
</div>

CSS

input { margin: 5px; }

JavaScript

$.widget('my.widget', {
    //Widget options
    options:{
        visible: false
    },
    
    //Knockout items container
    items: ko.observableArray([
        {itemProperty: 'value'},
        {itemProperty: 'value2'}
    ]),
    
    //Add an item
    addItem: function(item){
        this.items.push(item);
    },
    
    templateKey: 'my_widget_template',
    
    templateContent: "<div data-bind=\"foreach: items\"><input data-bind=\"value: itemProperty\" /><br/></div>", 
    
    _create: function() {
        //add template, if necessary
        if (!document.getElementById(this.templateKey)) {
            document.write("<script id=\"" + this.templateKey + "\" type=\"text/html\">" + this.templateContent + "</scr" + "ipt>");
        }
        
        //render template
        ko.renderTemplate(this.templateKey, this, { templateEngine: ko.nativeTemplateEngine.instance }, this.element, "replaceNode");
                           
    }
});$('#widget').widget('addItem','item','2')