This example demonstrates passing the basic options required by the ListView plugin.

<div data-bind="kendoListView: { data: items, template: template }"> </div>

var ViewModel = function() {
    this.items = ko.observableArray([
        { id: "1", name: "apple"},
        { id: "2", name: "orange"},
        { id: "3", name: "banana"}
    ]);
    this.template = kendo.template('<div>#= name #</div>');
};

                            ko.applyBindings(new ViewModel());

This example demonstrates passing additional options in the data-bind attribute. The Add Item button updates the underlying data and shows that the ListView remains in sync.

<div data-bind="kendoListView: { data: items, navigatable: true, selectable: true, template: template }"> </div>
<button data-bind="click: addItem">Add Item</button>

var ViewModel = function() {
    this.items = ko.observableArray([
        { id: "1", name: "apple"},
        { id: "2", name: "orange"},
        { id: "3", name: "banana"}
    ]);
    this.template = kendo.template('<div>#= name #</div>');
    
    this.addItem = function() {
        var num = this.items().length + 1;
        this.items.push({ id: num, name: "new" + num});
    };
};

                            ko.applyBindings(new ViewModel());

This example demonstrates using a Knockout template for the list view row.

<div data-bind="kendoListView: { data: items, template: 'listTmpl', useKOTemplates: true }"> </div>

<button data-bind="click: addItem">Add Item</button>

<script id="listTmpl" type="text/html">
    <div>
        <span data-bind="text: id"></span>
        <input data-bind="value: name" />
        <a href="#" data-bind="click: $root.removeItem"> x </a>
    </div>
</script>

var ViewModel = function() {
    this.items = ko.observableArray([
        { id: "1", name: ko.observable("apple")},
        { id: "2", name: ko.observable("orange")},
        { id: "3", name: ko.observable("banana")}
    ]);

    this.addItem = function() {
        var num = this.items().length + 1;
        this.items.push({ id: num, name: ko.observable("new" + num)});
    };

    this.removeItem = function(item) {
        this.items.remove(item);
    }.bind(this);
};

                            ko.applyBindings(new ViewModel());

This example demonstrates setting global options in ko.bindingHandlers.kendoListView.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<div data-bind="kendoListView: { data: items, template: template }"> </div>
<button data-bind="click: addItem">Add Item</button>

var ViewModel = function() {
    this.items = ko.observableArray([
        { id: "1", name: "apple"},
        { id: "2", name: "orange"},
        { id: "3", name: "banana"}
    ]);
    
    this.template = kendo.template('<div>#= name #</div>');
    
    this.addItem = function() {
        var num = this.items().length + 1;
        this.items.push({ id: num, name: "new" + num});
    };
};

ko.bindingHandlers.kendoListView.options = {
    navigatable: true,
    selectable: true
};

                            ko.applyBindings(new ViewModel());