kikki's tech note

技術ブログです。UnityやSpine、MS製品など技術色々について解説しています。

Knockout.jsの導入

前稿では、チャットツールの基礎として、「SignalR」を用いたチャットツールを作成しました。
本稿では応用として、リッチなUIを作成する上で助けとなる、データバインドフレームワークのKnockout.jsについて確認します。

Knockout.jsとは

Knockout.jsは、MVVMを実現できるデータバインディングjavascriptライブラリです。同様のライブラリとして、AngularJSやBackbone.jsがあります。Knockout.jsの特徴として、以下の特徴があります。

  • 初心者でも取り組みやすい記法
  • HTMLの崩れが少ない
  • 中規模案件開発に最適
  • VisualStudioでインテリセンス機能が働く

MS製品と親和性が高いことから、本稿でKnockout.jsを取り入れた、サンプルプログラムを紹介します。

データモデルバインディングの実装

本章では、前稿で作成したhtmlを以下の通りに編集します。

<html>
<head>
    <title>Chat Tool</title>
</head>
<body>
    <h2>Chat</h2>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <!-- knockoutjsで定義された配列型のデータをHTML要素にバインド -->
        <ul id="discussion" data-bind="foreach: { data: words, as: 'word' }">
            <li>
                <!-- 配列内の要素を<li>の項目としてバインド -->
                <label><strong><span data-bind="text: word.name"></span>:</strong><span data-bind="text: word.message"></span></label>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.0.3.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script>
        $(function () {
            // knockoutjsで利用するデータモデルを定義
            var viewModel = {
                words: ko.observableArray(),
            };
            // knockoutjsでのデータ監視を開始
            ko.applyBindings(viewModel);
            var chat = $.connection.chatHub;
            chat.client.addNewMessageToPage = function (name, message) {
                // 定義されたデータモデルのデータを変更
                // ※本アプリではデータを追加
                viewModel.words.push({
                    name: name,
                    message: message,
                });
            };
            $('#displayname').val(prompt('Enter your name:', ''));
            $('#message').focus();
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    chat.server.send($('#displayname').val(), $('#message').val());
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

編集のポイントとして、以下のポイントが有ります。

  • 予めデータバインドさせるモデルをjavascript側で定義すること
  • 監視対象の変数は、単数の場合「ko.observable()」、複数の場合「ko.observableArray()」で監視する

knockoutjsでは、本稿で利用した機能以外にも、便利な機能が数多く定義されているので是非公式のリファレンスを閲覧下さい。
Knockout : Introduction

これで、スクリプトがスッキリとした、動的にコンテンツが追加されるリアルタイムウェブアプリを実装できました。

実行

本アプリを実行すると、以下の通り、一つの画面で反映したコメントが全画面に反映されます。
f:id:kikkisnrdec:20150605132533p:plain

まとめ

knockoutjsやAngularJSで代表されるデータバインドフレームワークは、可読性を高め効率的にデータを扱うことができます。
Ajaxとも親和性が非常に高いので、積極的に利用してスマートなアプリ開発を進めていきましょう。

昨今では、軽量級データバインドフレームワークが注目されつつあります。
facebookを代表するReactJS、こちらも時間があるときにご紹介したいと思います。

※無断転載禁止 Copyright (C) 2015 kikkisnrdec All Rights Reserved.