knockout.js + jquery examples

Knockout + jquery examples

by pkysylevych

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
<script src="https://raw.github.com/AndersMalmgren/Knockout.Bindings/master/src/knockout.bindings.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css">
<!-- ko message: message --><!-- /ko -->
<button data-bind="click: showSplash">Show Splash message</button>
<button data-bind="click: showAlert">Show alert message</button>
<button data-bind="click: showConfirm">Show confirm message</button>

<div>
    <button data-bind="button: {}">This is a jQuery button</button>
    <button data-bind="button: { icon: 'ui-icon-arrowreturnthick-1-w' }">This is a jQuery button with icon</button>
    <p>jQuery buttons have a bug so if the button is disabled from the click handler the layout is broken (It looks clicked)</p>
    <button data-bind="click: disableButton, enable: buttonEnabled, button: {}">This button can handle being disabled from click handler</button>  
    <button data-bind="click: increaseButton,  button: { label: buttonLabel }"></button>
</div>
<div>
    <input data-bind="datepicker: date, datepickerOptions: { minDate: new Date() }" />
</div>
<button data-bind="click: showDialog">Show dialog</button>
<div id="dialog" data-bind="dialog: { autoOpen: false, modal: true, title: dialogTitle }, template: { name: 'dialog-template', data: dialogItem, if: dialogItem }, openDialog: dialogItem"></div>

<script id="dialog-template" type="text/html">
    <span data-bind="text: message"></span>
</script>

<div>
    <input data-bind="label: { caption: 'Label with reference to input' }" type="checkbox" />
</div>

<div data-bind="tabs: tabs, tabsOptions: { selectedTab: selectedTabModel, enable: tabsEnabled }"></div>
<button data-bind="click: setTabTwo">Set tab 2 from view model</button>
<button data-bind="click: toggleTabTwo">Toggle tab 2</button>
<button data-bind="click: toggleTabs">Toggle tabs</button>           ...

CSS

#splash {
    text-align: center;
}

JavaScript

ViewModel = function () {
    this.message = ko.observable();
    this.date = ko.observable(new Date());
    this.buttonEnabled = ko.observable(true);
    this.buttonLabel = ko.observable(0);

    this.dialogItem = ko.observable();
    this.dialogTitle = ko.computed(function () {
        return this.dialogItem() != null ? this.dialogItem().title : "";
    }, this);

    this.tabs = ko.observableArray([
        new ko.TabViewModel(1, "Tab 1", { content: "Content of tab 1" }, "tab-template"),
        new ko.TabViewModel(2, "Tab 2", { content: "Content of tab 2" }, "tab-template")]);

    this.selectedTabModel = ko.observable();
    this.tabsEnabled = ko.observable(true);
};


ViewModel.prototype = {
    showSplash: function () {
        this.message({ splash: "This is a splash message" });
    },
    showAlert: function () {
        this.message({ alert: "This is a alert message" });
    },
    showConfirm: function () {
        var args = { confirm: "Choose!" };
        this.message(args);

        this.message({ splash: args.result ? "Yes" : "No" });
    },
    disableButton: function () {
        this.buttonEnabled(false);
    },
    increaseButton: function() {
        this.buttonLabel(this.buttonLabel() + 1);        
    },
    showDialog: function () {
        this.dialogItem({ message: "This is a dialog", title: "Databindable title" });
    },
    setTabTwo: function () {
        this.selectedTabModel(this.tabs()[1].model());
    },
    toggleTabTwo: function() {
        this.tabs()[1].enable(!this.tabs()[1].enable());
    },
    toggleTabs: function() {
        this.tabsEnabled(!this.tabsEnabled());
    },
    addTab: function () {
        var newIndex = this.tabs().length + 1;
        this.tabs.push(new ko.TabViewModel(newIndex, "Tab " + newIndex, { content: "Content of tab " + newIndex }, "tab-template"));
    },
};


ko.applyBindings(new ViewModel());