Knockout - Kendo UI Simple Data Binding Example

Updated version to KO 2.0.0 of sample from http://demos.kendoui.com/web/integration/index.html

by johnpapa

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <p> Choose a ticket class: <select id="ticket" style="vertical-align: middle" data-bind="options: tickets,
        optionsCaption: 'Choose...',
        optionsText: 'name',
        value: chosenTicket"></select>
     <select data-bind="options: tickets, 
    optionsCaption: 'Choose ...',
    optionsText: 'name', 
    value: chosenTicket"></select>
    </p>
        <p>test: <span data-bind="text:chosenTicket() ? chosenTicket().name : 'unknown'"></span></p>
            <br/>
    <!-- ko if: chosenTicket() -->
        You selected a <span data-bind="text:chosenTicket().name"></span> ticket, which costs ($<span data-bind="text:chosenTicket().price"></span>)
    <button data-bind="click: resetTicket">Clear</button>
    <!-- /ko -->
</div>

JavaScript

var ViewModel = function() {
    this.tickets = ko.observableArray([
        {
        id: 1,
        name: "Economy",
        price: 199.95},
        {
        id: 2,
        name: "Business",
        price: 449.22},
        {
        id: 3,
        name: "First Class",
        price: 1199.99}
    ]);
    this.chosenTicket= ko.observable();
    this.resetTicket = function() {
        this.chosenTicket(null)
    };
};

ko.applyBindings(new ViewModel());

$("#ticket").kendoDropDownList();