複合オブジェクトをバインドする方法 (HTML)

[アーティクル]
09/20/2015

アプリを複雑なオブジェクト、特にアプリの UI で制御されないプロセスを管理するオブジェクトなどにバインドしたいことは、よくあります。このトピックでは、名前と色を含むオブジェクトのデータを表示するアプリの記述方法を示します。これは、基本的には「クイックスタート: データとスタイルのバインド」と同じです。ここでは、変更をトリガーするボタンに応答するのではなく、オブジェクトで変更プロセス自体を管理します。

必要条件

「クイックスタート: HTML 要素へのデータとスタイルのバインド」の手順を最後まで実行すると、この方法トピックの手順を実行する際に役立ちます。

手順

ステップ 1: バインドを使うためのプロジェクトを設定する

JavaScript を使って空の Windows ランタイムアプリを作成し、ObjectBinding という名前を付けます。
次に示すように、default.html でバインド用の DIV 要素を追加し、"objectBinding" という ID、Welcome という内部テキスト、"bindableSpan" という ID を持つ SPAN 要素を指定します。
```
<body>
    <div id="objectBinding">
      Welcome
      <span id="bindableSpan"></span>
    </div>
</body>
```

ステップ 2: 複合オブジェクトを設定する

name フィールドと color フィールド、名前の配列、色の名前の配列、配列にランダムなインデックスを提供するプライベートメソッドを含む Person オブジェクトを定義します。このオブジェクトの定義には、WinJS.Class.define メソッドを使うことができます。default.js の直接起動される匿名関数内に、次のコードを追加します。


(function () {
    "use strict";

    // Other app code ...

    var Person = WinJS.Class.define(
        function() {
            this.name = "Harry";
            this.color = "blue";
            this.timeout = null;
        }, {

        _nameArray:
            ["Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam"],
        _colorArray:
            ["lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow"],

        _newName: function () {
            this.name = this._nameArray[this._randomizeValue(this._nameArray.length)];
            this.color = this._colorArray[this._randomizeValue(this._colorArray.length)];
        },
        _randomizeValue: function (max) {
            return Math.floor(Math.random() * 1000) % max); 
        }
    });

})();

Person の定義 (WinJS.Class.define に渡される 2 番目の引数) に、name フィールドと color フィールドを 500 ミリ秒ごとに変更するプロセスを開始するメソッドと、このプロセスを停止するメソッドの 2 つのパブリックメソッドを追加します。WinJS.Class.define の完全な呼び出し方法を、次に示します。


(function () {
    "use strict";

    // Other app code ...

    var Person = WinJS.Class.define(
        function() {
            this.name = "Harry";
            this.color = "blue";
            this.timeout = null;
        }, {

        _nameArray:
            ["Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam"],
        _colorArray:
            ["lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow"],

        _newName: function () {
            this.name = this._nameArray[this._randomizeValue(this._nameArray.length)];
            this.color = this._colorArray[this._randomizeValue(this._colorArray.length)];
        },
        _randomizeValue: function (max) {
            return Math.floor(Math.random() * 1000) % max); 
        },

        // Starts the process that changes the name.
        start: function () {
            var that = this;
            if (this.timeout === null) {
                this.timeout = setInterval(function () { that._newName(); }, 500);
            }
        }, 

        // Stops the process that changes the name.
        stop: function () {
            if (this.timeout !== null) {
            clearInterval(this.timeout);
                this.timeout = null;
            }
        }
    });

})();

ステップ 3: オブジェクトを HTML にバインドする

現時点では、Person オブジェクトは監視可能ではありません。つまり、オブジェクトが変更されても通知されません。Person オブジェクトを適切なバインド機能と組み合わせることで、監視可能なオブジェクトにすることができます。WinJS.Class.mix 関数は、bind メソッドを含む WinJS.Binding.mixin オブジェクトの機能と、バインドするオブジェクトのプロパティを作成する WinJS.Binding.expandProperties 関数の機能を Person オブジェクトに追加します。Person オブジェクトの定義の後で WinJS.Class.mix を呼び出します (何かと組み合わせるには、その前に Person クラスを定義しておく必要があります)。
```
WinJS.Class.mix(Person,
    WinJS.Binding.mixin,
    WinJS.Binding.expandProperties({name: "", color: ""})
); 
```
また、Person コンストラクター内で _initObservable を呼び出して、_backingData プロパティを設定する必要があります。Person コンストラクターを次のように変更します。
```
...
function () {
    this._initObservable();

    this.name = "Harry";
    this.color = "blue";
    this.timeout = null;
    }
...
```
Person オブジェクトをインスタンス化した後で、2 つのプロパティにバインドできます。bind メソッドは、バインドするプロパティまたはフィールドの名前と、バインドする方法を指定する関数の 2 つのパラメーターを受け取ります。この関数には、新しい値と前の値の 2 つのパラメーターがあります。bind はインスタンスメソッドであるため、ここでは Person をインスタンス化し、name フィールドと color フィールドに対して bind を呼び出します。default.js の app.onactivated イベントハンドラー内に次のコードを追加します。
```
app.onactivated = function (args) {

    // Other activation code ...

    var myPerson = new Person();

    myPerson.bind("name", onNameChange);

    myPerson.bind("color", onColorChange);

    function onNameChange (newValue) {
        var span = document.getElementById("bindableSpan");
        span.innerText = newValue;
    }

    function onColorChange (newValue) {
        var span = document.getElementById("bindableSpan");
        span.style.color = newValue;
    }
}
```
警告 HTML 要素の ID にデータをバインドしないでください。

変更イベントの発生を有効にするには、Person._newName 関数を変更する必要があります。

_newName: function () {
    this["name"] = this._nameArray[this._randomizeValue()];
    this['color"] = this._colorArray[this._randomizeValue()];
    }

Person.start メソッドを呼び出すことでバインドをテストできます。
```
myPerson.start();
```
アプリをビルドして実行すると、次のテキストが表示されます。

Welcome, Harry

名前と名前の色が継続的に変更されます。

次の方法で共有

複合オブジェクトをバインドする方法 (HTML)

必要条件

手順

ステップ 1: バインドを使うためのプロジェクトを設定する

ステップ 2: 複合オブジェクトを設定する

ステップ 3: オブジェクトを HTML にバインドする

関連トピック

その他のリソース