Knockout.jsで良く利用するバインドのパターン

本稿では、Knockout.jsでよく利用されるバインドのパターンについて共有します。

事前準備

本章で利用するデータモデルを定義します。
[js]

var viewModel = {
    TypeList: ko.observableArray([{
        TypeId: 1,
        TypeName: "努力家",
    },{
        TypeId: 2,
        TypeName: "怠け者",
    }]),
    OwnerList: ko.observableArray([{
        OwnerId: 1,
        Name: "佐藤",
        IsOwnerSelected: false,
        TitleList: [{
            TitleId: 1,
            Title: "国語",
            IsTitleSelected: true,
        },{
            TitleId: 2,
            Title: "数学",
            IsTitleSelected: false,
        }],
    },{
        OwnerId: 2,
        Name: "鈴木",
        IsOwnerSelected: true,
        TitleList: [{
            TitleId: 1,
            Title: "国語",
            IsTitleSelected: false,
        },{
            TitleId: 2,
            Title: "数学",
            IsTitleSelected: true,
        }],
    }]),
    Mode: ko.observable("view"),
};
ko.applyBindings(viewModel);
$(document).on("click", "#changeEdit", function () {
    viewModel.Mode("edit");
});
$(document).on("click", "#changeView", function () {
    viewModel.Mode("view");
});

List

ulタグやolタグで代表されるように、リスト形式でjavascriptで定義した配列を表示する場合、以下のように実装します。なお今回は、htmlの属性に記載する方法と入れ子でリストを作る方法についても合わせて記述しています。

[html]

<!-- ①：「as」を用いることで、配列の中限定の変数を定義できる -->
<ul data-bind="foreach: { data: OwnerList, as: 'ownerItem' }">
    <!-- ②：「attr」を用いることで、htmlタグの属性を定義できる -->
    <!-- なお属性は、「''」や「""」を用いて、string型で定義する -->
    <li data-bind="attr: { 'data-id': ownerItem.OwnerId, 'selected': ownerItem.IsOwnerSelected }">
        <span data-bind="text: ownerItem.Name"></span>
        <!-- ③：①で定義した変数を用いて、再度リストを作る -->
        <ul data-bind="foreach: { data: ownerItem.TitleList, as: 'titleItem' }">
            <li data-bind="text: Title, attr: { 'data-id': titleItem.TitleId, 'selected': titleItem.IsTitleSelected }"></li>
        </ul>
    </li>
</ul>

Select Box

selectタグを実装する場合、以下のように実装します。なお冒頭に説明文を入れる場合、「optionsCaption」を利用します。
[html]

<select data-bind="options: TypeList, optionsText: 'TypeName', optionsValue: 'TypeId', optionsCaption: '選択してください...'"></select>

Template

編集画面と表示画面を入れ替えたい場合、template機能を利用して以下のように実装します。
[html]

<div data-bind="template: { name: Mode }"></div>
<!-- 「Mode」の値を「view」と「edit」で入れ替えることで、編集画面と表示画面が入れ替わります。 -->
<script type="text/html" id="view">
    <label>表示モード</label>
    <button id="changeEdit">編集モードに変更</button>
</script>
<script type="text/html" id="edit">
    <input type="text" value="編集モード"/>
    <button id="changeView">表示モードに変更</button>
</script>

最後に

本稿では、Knockout.jsでよく利用されるバインド方法について、共有しました。Knockout.jsでは、他にも便利な機能が数多く利用されているのでリファレンスを参照下さい