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
これで、スクリプトがスッキリとした、動的にコンテンツが追加されるリアルタイムウェブアプリを実装できました。
実行
本アプリを実行すると、以下の通り、一つの画面で反映したコメントが全画面に反映されます。
