Web ブラウザーから使う、WinJS2.1 入門(データバインド)

  • Article

前回の記事から、HTML5 アプリケーションのフレームワーク WinJS2.1 の使い方について紹介しています。

今回は WinJS2.1 を使用したデータバインドの使用方法について紹介します。

 

データバインドとは

データバインドとは、文字通りデータとなにがしかを結合することであり、Web のフロントエンド開発では、多くの場合 HTML のエレメントと JavaScript で扱われるデータを結合する機能を言います。

データバインドを使用すると、HTML エレメントのプロパティ毎にいちいちデータをセットする処理を記述する必要がなくなります。

あらかじめ使用するデータと、それらに対応した HTML エレメントのプロパティを定義しておけば、メソッドをひとつ実行するだけで、その内容を UI に反映させることができます。また、この HTML エレメントのプロパティに対応するデータの定義は、HTML マークアップの data-win-bind 属性の中に定義しておけるので、HTML エレメントのプロパティと、対応するデータが変更されても JacaSctipt コードを変更する必要はありません。これによってデータと UI エレメントの関係を抽象化することができます。

 

データバインドに使用するデータ

HTML エレメントとバインドするデータは、プロパティを持つオブジェクトでかつ、HTML エレメントのプロパティの値として適切なものである必要があります。たとえば、HTML エレメントの backGround-color 属性に単なる数字を指定しても、backGround-color 属性に指定できるのは、カラーコードやカラー名であるため、その内容は反映されません。

HTML エレメントにバインド可能なデータは以下のようなものです。

var myBlogsData = {   
    pageTitle : “monoe’s blog”,
    url:”https://blogs.msdn.com/b/osamum”,
    description : ”MS Web技術のよもやま話”,
    fontSize : “30px”,
    fontColor: “green”,
    backGroundColor: “red”
};

HTML エレメントのプロパティとの関連づけは、任意のタグの中に backGround-color 属性を設け、”HTML エレメントの属性名 : オブジェクトのプロパティ名” というように記述します。

例えば、HTML エレメントの innerText にオブジェクトの pageTitle プロパティ(フィールド) をセットする場合は以下のようにします。

innerText : pageTitle

具体的な記述例は以下のとおりです。

<a id=”myBlogLink”
    data-win-bind=”innerText : pageTitle; href : url; title: description;
    style.fontSize: fontSize; style.color: fontColor;
    style.backGroundColor: .backGroundColor” 
/>

(※) 上記の例では style 属性の指定方法を紹介する意味で書式の指定もデータで行っていますが、実際に使用する際には書式はまとめて CSS のクラスとして定義し、className 属性にクラス名を紐づけるほうがスマートでしょう。

 

データバインドの実行

データバインドを実行するには、WinJS が提供する Binding オブジェクトの processAll メソッドの第一引数に HTML エレメントのインスタンスを、第二引数にバインドするデータを定義したオブジェクトを指定します。

具体的には以下のように記述します。

//ターゲットとなる a タグのインスタンスを取得
var myBlogLink = document.getElementById("myBlogLink");

//processAll メソッドの第一引数に HTML エレメントのインスタンス、
//第二引数にバインドするデータを定義したオブジェクトを指定
WinJS.Binding.processAll(myBlogLink, myBlogsData);

実行すると、文字の色が緑、背景色が赤の、このブログのトップページへのリンクが表示されます。なお、このリンクにマウスアイコンをホバーすると「MS Web技術のよもやま話」とツールチップスが表示されます。

    image
(WinJS.Binding.processAllメソッドを実行したところ)

ここまでの全体の記述は以下のとおりです。

<!DOCTYPE html>
< html xmlns="https://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Microsoft.WinJS.2.1/js/base.js"></script>
    <script>
        (function () {
            document.addEventListener("DOMContentLoaded", function () {
                 //ターゲットとなる a タグのインスタンスを取得
                var myBlogLink = document.getElementById("myBlogLink");

                //processAll メソッドの第一引数に HTML エレメントのインスタンス、
                //第二引数にバインドするデータを定義したオブジェクトを指定
                WinJS.Binding.processAll(myBlogLink, myBlogsData);
            });

            var myBlogsData = {
                pageTitle: "monoe’s blog",
                 url: "https://blogs.msdn.com/b/osamum",
                 description: "MS Web技術のよもやま話",
                fontSize: "30px",
                fontColor: "green",
                backGroundColor: "red"
            };
        })();
    </script>
< /head>
< body>
    <a id="myBlogLink"
       data-win-bind="innerText:pageTitle; href:url; title:description;
       style.fontSize:fontSize; style.color: fontColor;
       style.backgroundColor:backGroundColor" />
< /body>
< /html>  

 

まとめ

今回は WinJS2.1 を使用したデータバインドの方法について紹介しました。

データバインドを使用すると、HTML エレメント (UI エレメント) の各プロパティとデータの対応をコードから切り離して書けるため、プロパティとデータの対応が変更になった場合でもターゲットとなるエレメントの data-win-bind 属性の内容を書き換えれば良いだけなので作業が簡単になります。

次回はデータバインドの応用となる、WinJS2.1 を使用したテンプレート機能について紹介します。

 

Real Time Analytics

Clicky