クイック スタート: データとスタイルのバインド (HTML)

  • [アーティクル]

JavaScript 用 Windows ライブラリのバインドを使って、データとスタイルを HTML 要素にバインドできます。既定では、WinJS のバインドは一方向です。つまり、データとスタイルの値が変更されると HTML 要素が更新されますが、HTML 要素が変更されてもデータは更新されません。このクイックスタートでは、データだけを含む単純なオブジェクトへの宣言型のバインドについて説明します。これは最も基本的な種類のバインドです。高度な種類のバインドについては、「複合オブジェクトをバインドする方法」と「テンプレートを使ってデータをバインドする方法」をご覧ください。

必要条件

このトピックは、JavaScript で基本的な Windows ランタイム アプリを作成できることを前提としています。アプリを初めて作る場合は、「JavaScript を使った初めての Windows ストア アプリの作成」をご覧ください。

バインド プロジェクトの設定

バインドを使うためのプロジェクトを設定するには、次の手順を実行します。

  1. JavaScript を使って新しい空の Windows ランタイム アプリを作成し、BindingApp という名前を付けます。

  2. default.html で、次に示すように、バインド用の DIV 要素を追加し、"basicBinding" という ID と、Welcome という内部テキストを指定します。

    <body>
    <div id="basicBinding">
      Welcome
    </div>
</body>

データのバインド

HTML 要素には任意の種類のデータをバインドできますが、ここでは名前のフィールドを含む person オブジェクトを設定します。

警告  HTML 要素の ID にデータをバインドしないでください。

 

  1. default.js で、use strict ディレクティブの直後にある、直接起動される匿名関数内に次のコード行を追加します。

    (function () {
    "use strict";

    // Create a 'person' object.
    var person = { name: "Fran" };

    // Other app set-up code.
})();

  2. DIV 要素内に、person.name フィールドにアクセスする SPAN 要素を追加します。

    <div id="basicBinding">
    Welcome, 
    <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>

  3. 名前を表示するには、WinJS.Binding.processAll を呼び出す必要があります。WinJS.Binding.processAll は、まず指定された要素の data-win-bind 属性を検索し、次にその要素のすべての子孫を検索します。WinJS.Binding.processAll の第 2 パラメーターは、指定された要素に挿入するデータ コンテキストを提供します。 default.js の app.onactivated イベント ハンドラー内に次のコードを追加します。

    app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
}

  4. プロジェクトをビルドしてデバッグすると、次のテキストが表示されます。

    Welcome, Fran

  5. 次のコードについて考えてみましょう。

    
app.onactivated = function (args) {

    // Other activation code ...

    var personDiv = document.querySelector('#nameSpan');
    WinJS.Binding.processAll(personDiv, person);
    var bindingSource = WinJS.Binding.as(person);
}
    • WinJS のバインディング システムでは、監視可能なレイヤーを使って変更通知を伝達します。
    • データ オブジェクトをデータ コンテキストとして processAll に渡すと、そのデータ オブジェクトは、WinJS.Binding.as の呼び出しでラップされます。この呼び出しにより、そのオブジェクトの監視可能なプロキシが作成されたり、そのオブジェクトの作成済みの監視可能なプロキシとの組み合わせが実行されたりします。
    • このプロキシ レイヤーを使って通知を発生させる必要がある場合、その通知を伝達するためのすべての "書き込み" (プロパティ セットの書き込み) は、WinJS.Binding.as レイヤーを介して監視可能なプロキシと組み合わされます。
    • これを最も簡単に行う方法として、その監視可能なプロキシを、単にデータを読み書きするためのオブジェクトとして使う方法があります。この方法は頻繁に利用されます。
    • 1 回限りのバインドは、バインド初期化子を使って既定の動作を上書きするときに発生します (WinJS.Binding.oneTime など)。または、拡張不可能なオブジェクト (固定されたオブジェクトまたは WinRT でプロジェクションされたオブジェクトなど) に対してバインドを試行するときにも発生します。

  6. 基になるデータが変更されたときにどのような結果になるかを示すために、別のプロセスまたは内部データ ストアからのデータの取得をボタンを使ってシミュレートします。default.html で、DIV の下に BUTTON 要素を追加します。

    <button id="btnGetName">Get name</button>

  7. データの取得をシミュレートするモック メソッドを追加します。ここでは、ランダムなインデックスを使って配列から名前を取得します。default.js で、ボタンのクリック イベントを処理する app.onactivated イベント ハンドラーに、次のコードを追加します。

    document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray);
    }

var nameArray =
        new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam");

function getName(source, nameArray) {
    source.name = nameArray[randomizeValue()];
}

function randomizeValue() {
    var value = Math.floor((Math.random() * 1000) % 8);
    if (value < 0)
        value = 0;
    else if (value > 9)
        value = 9;
    return value;
}

  8. このコードをテストするために、アプリケーションをビルドしてデバッグします。[Get name] ボタンをクリックするたびに異なる名前が表示されます。

スタイルのバインド

ここでは、SPAN 要素の背景色をバインドします。

  1. default.html で、style.background 値を data-win-bind 属性に追加し、person オブジェクトの color フィールドへのバインドを設定します。

    <div id="basicBinding">
    Welcome, <span id="nameSpan" data-win-bind="innerHTML: name; style.background: color"></span>
</div>

  2. default.js で、person オブジェクトに color フィールドを追加します。

    ヒント  バインド式の左辺は、要素の任意のプロパティとそのサブプロパティです (プログラムによって代入するときに使う JavaScript 構文を使用)。

     

    var person = { name: "Fran", color: "red" };

  3. また、この default.js の app.onactivated イベント ハンドラーに、2 つ目の配列として色の配列を追加し、名前の色を更新するように getName 関数を変更します。

    var colorArray =
    new Array("lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue","lightgreen", "lightyellow");

function getName(source, nameArray, colorArray) {
    source.name = nameArray[randomizeValue()];
    source.color = colorArray[randomizeValue()];
    }

  4. ボタンのクリック イベント ハンドラーにおける getName の呼び出しも必ず変更します。

    document.querySelector("#btnGetName").onclick = function () {
            getName(bindingSource, nameArray, colorArray);
    }

  5. アプリをビルドしてデバッグすると、[Get name] ボタンをクリックしたときに、名前と名前の色の両方が更新されることがわかります。

要約と次のステップ

このクイックスタートでは、単純な JavaScript オブジェクトを HTML の span にバインドする方法を説明しました。

複雑なオブジェクトをバインドする方法については、「複合オブジェクトをバインドする方法」をご覧ください。テンプレートを使って複数のオブジェクトをバインドする場合は、「テンプレートを使ってデータをバインドする方法」をご覧ください。