Knockout.js

by hira3

HTML

<h1>Knockout.js</h1>

<div class="readout">
    <h3>ViewModel の値</h3>
    <table>
        <tr>
            <td class="label">テキスト値:</td>
            <td data-bind="text: stringValue"></td>
        </tr>
        <tr>
            <td class="label">パスワード:</td>
            <td data-bind="text: passwordValue"></td>
        </tr>
        <tr>
            <td class="label">真偽値:</td>
            <td data-bind='text: booleanValue() ? "True" : "False"'></td>
        </tr>
        <tr>
            <td class="label">選択された値:</td>
            <td data-bind="text: selectedOptionValue"></td>
        </tr>
        <tr>
            <td class="label">選択された値 (複数選択):</td>
            <td data-bind="text: multipleSelectedOptionValues"></td>
        </tr>
        <tr>
            <td class="label">ラジオボタンの選択された値:</td>
            <td data-bind="text: radioSelectedOptionValue"></td>
        </tr>
    </table>
</div>
  
<h3>Form 部品</h3>
<table>
    <tr>
        <td class="label">テキスト値 (focusout時に更新):</td>
        <td><input data-bind="value: stringValue" /></td>
    </tr>
    <tr>
        <td class="label">テキスト値 (タイプ時に更新):</td>
        <td><input data-bind='value: stringValue, valueUpdate: "afterkeydown"' /></td>
    </tr>
    <tr>
        <td class="label">テキスト値 (複数行):</td>
        <td><textarea data-bind="value: stringValue"></textarea></td>
    </tr>
    <tr>
        <td class="label">パスワード:</td>
        <td><input type="password" data-bind="value: passwordValue" /></td>
    </tr>
    <tr>
        <td class="label">チェックボックス:</td>
        <td><input type="checkbox" data-bind="checked: booleanValue" /></td>
    </tr>
    <tr>
        <td class="label">ドロップダウンリスト:</td>
        <td><select data-bind="options: optionValues, value: selectedOptionValue"></select></td>
    </tr>
    <tr>
        <td class="label">複数選択リスト:</td>
        <td><select multiple="multiple" data-bind="options: optionValues, selectedOptions: multipleSelectedOptionValues"></select></td>
    </tr>
    <tr>
        <td...

CSS

body { font-family: arial; font-size: 14px; }
.readout { width: 45%; float: right; }
.readout td { width: 50%; }
tr { vertical-align: top }
td { padding: 0.2em 0.2em 0.6em 0.2em; }
td.label { text-align: right; padding-right: 0.5em; }
input[type=radio] { margin: 0 0.25em 0 0.25em }

JavaScript

var viewModel = {
    stringValue : ko.observable("こんにちわ"),
    passwordValue : ko.observable("hogehoge"),
    booleanValue : ko.observable(true),
    optionValues : ["Alpha", "Beta", "Gamma"],
    selectedOptionValue : ko.observable("Gamma"),
    multipleSelectedOptionValues : ko.observable(["Alpha", "Gamma"]),
    radioSelectedOptionValue : ko.observable("Beta")
};
ko.applyBindings(viewModel);