Knockout - Built-In Bindings

Shows all of the built in bindings for Knockout

by johnpapa

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
    <div class="page">
        <h1>Knockout: Built-In Bindings</h1>
        <div>
            <a href="http://twitter.com/john_papa">@john_papa</a>
        </div>
        <div id="main">
            <div class="controlsPanel">
            <table>
                <thead>
                    <tr>
                        <td>Bindings</td>
                        <td>Target Value</td>
                        <td>Source Value(s)</td>
                    </tr>
                </thead>
                <!--Basics-->
                <tr>
                    <td>
                        <div class="caption">text</div>
                    </td>
                    <td><span data-bind="text: model.code"></span></td>
                    <td><span data-bind="text: model.code"></span></td>
                </tr>
                <tr>
                    <td>
                        <div class="caption">
                            html</div>
                    </td>
                    <td>
                        <div data-bind="html: details">
                        </div>
                    </td>
                    <td>
                        <span>details: </span><span data-bind="text: details"></span>
                    </td>
                </tr>
                <!--Input bindings and form fields-->
                <tr>
                    <td>
                        <div class="caption">value</div>
                        <div class="notes">text input</div>
                    </td>
                    <td><input type="text" data-bind="value: model.code"/></td>
                    <td><span>model.code: </span><span data-bind="text: model.code"></span></td>
                </tr>
                <tr>
                    <td>
                        <div class="caption">value</div>
                        <div class="notes">text input with change on each...

CSS

body {padding: 10px; font: 12px 'SansationRegular', Arial, sans-serif;}
span {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0px 4px 0px 4px;
}
/*.text*/
.caption {
    font: 12px 'SansationBold', Arial, sans-serif;
    color: olivedrab
}
.notes {
    font: 12px 'SansationLight', Arial, sans-serif;
    color: gray;
    font-style: italic
}
input, select {
    font: 12px 'SansationRegular', Arial, sans-serif;
    margin: 0px 4px 0px 4px;
    clear: left;
    color: rgb(47, 123, 163);
}
input[type=text] {
    width: 100px;
}
select {
    width: 120px;
}
.negative {
    color: red;
}
.positive {
    color: green;
}
table {
    margin: 8px;
}
thead {
    font: 14px 'SansationBold', Arial, sans-serif;
}
td {
    border-bottom: 1px solid lightgray;
}
.resultsPanel 
{
    margin: 8px;
    padding: 4px;
    height: 300px;
    width: auto;
    border: gray dashed thin;
    overflow:scroll;
    overflow-x: hidden;
}
.guitarListCompact {padding: 10px; margin: 1px; float: left;vertical-align: middle;margin-left: auto;margin-right: auto;
    list-style: none;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;   
    overflow:hidden;
    width: 125px;
    width: 100px;
    /*border: gray dashed 1px;*/
}
.guitarListCompact {padding: 10px; margin: 1px; float: left;vertical-align: middle;margin-left: auto;margin-right: auto;
    list-style: none;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;   
    overflow:hidden;
    width: 125px;
    width: 100px;
    /*border: gray dashed 1px;*/
}
button {
    -moz-box-shadow: inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow: inset 0 1px 0 0 #ffffff;
    -o-box-shadow: inset 0 1px 0 0 #ffffff;
    box-shadow: inset 0 1px 0 0 #ffffff;
    background:-webkit-gradient( linear, left top, left...

JavaScript

var my = {};

my.showroomViewModel = {
    id: ko.observable("123"),
    salePrice: ko.observable(1995),
    profit: ko.observable(-7250),
    rating: ko.observable(4),
    isInStock: ko.observable(true),
    model: {
        code: ko.observable("314ce"),
        name: ko.observable("Taylor 314 ce")
    },
    colors: ko.observableArray([
        {
        key: "BR",
        name: "brown"},
    {
        key: "BU",
        name: "blue"},
    {
        key: "BK",
        name: "black"}]),
    selectedColor: ko.observable(""),
    selectedColorsForDropdown: ko.observableArray([]),
    selectedColorForRadio: ko.observableArray(),
    allowEditing: ko.observable(true),
    isReadonly: ko.observable(true),
    onSalesFloor: ko.observable(true),
    qty: ko.observable(7),
    photoUrl: ko.observable("http://johnpapa.net/files/downloads/sample images/guitar/314ce.png"),
    url: ko.observable("http://johnpapa.net"),
    details: ko.observable("<strong><em>This guitar rocks!</em></strong>"),
    checkboxHasFocus: ko.observable(false),
    textboxHasFocus: ko.observable(false),
    buttonHasFocus: ko.observable(false),
    userInput: ko.observable(""),
    setFocusToCheckbox: function() {
        this.checkboxHasFocus(true);
    },
    displayValue: function() {
        if (this.userInput().length > 0) {
            window.alert("You entered: " + this.userInput());
        }
    },
    detailsAreVisible: ko.observable(false),
    showDetails: function() {
        this.detailsAreVisible(true);
    },
    hideDetails: function() {
        this.detailsAreVisible(false);
    },
    useUniqueName: ko.observable(true)
};
ko.applyBindings(my.showroomViewModel);