win8_綁定複雜對象

http://msdn.microsoft.com/zh-cn/library/windows/apps/hh700355.aspx在許多情況下，你希望你的應用綁定到複雜的對象，特別是管理不由應用的 UI 控制的處理的那些對象。本主題介紹如何編寫應用（該應用顯示包含某個名稱和某種顏色的某個對象中的數據），這基本上與快速入門：綁定數據和樣式相同。在這種情形下，對象管理更改進程自身，而不是響應觸發更改的按鈕。

先決條件

通讀主題快速入門：將數據和樣式綁定到 HTML 元素，可能會有助於你完成此幫助主題中的步驟。

說明

步驟 1: 設置項目以使用綁定

創建使用 JavaScript 爲 Windows 構建的空白 Windows 應用商店應用並將其命名爲 ObjectBinding。
添加用於綁定的 DIV 元素併爲其提供 ID“objectBinding”，嵌入式文本 Welcome 以及具有 ID“bindableSpan”的 SPAN 元素，如此處所示。
HTML
<body> <div id="objectBinding"> Welcome <span id="bindableSpan"></span> </div> </body>

步驟 2: 設置複雜對象

定義具有名稱和顏色字段的 Person 對象，名稱數組、顏色名稱數組以及爲數組提供隨機索引的專用方法。對於此對象的定義，可以使用 WinJS.Class.define 方法。

JavaScript


<script type="text/javascript">
    var Person = WinJS.Class.define(
        function() {
            this.name = "Harry";
            this.color = "blue";
            this.timeout = null;
        }, {

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

        _newName: function () {
            this.name = this._nameArray[this._randomizeValue()];
            this.color = this._colorArray[this._randomizeValue()];
        },
        _randomizeValue: function () {
            var value = Math.floor((Math.random() * 1000) % 8);
            if (value < 0)
                value = 0;
            else if (value > 9)
                value = 9;
            return value;
        }
    });
</script>

現在將兩種公共方法添加到 Person 定義，這兩種方法用於啓動和停止每 500 毫秒更改名稱和顏色字段的進程。

JavaScript


start: function () {
    var that = this;
    if (this.timeout === null) {
        this.timeout = setInterval(function () { that._newName(); }, 500);
    }
}, 

 stop: function () {
    if (this.timeout !== null) {
    clearInterval(this.timeout);
        this.timeout = null;
    }
}

步驟 3: 將對象綁定到 HTML

Person 對象不能立即看到結果；也就是說，該對象未在更改時提供通知。可以通過將 Person 對象與正確的綁定功能結合來觀察該對象。WinJS.Class.mix 函數將 WinJS.Binding.mixin 對象的功能添加到 Person 對象中，前一對象包括 bind 方法和 WinJS.Binding.expandProperties 函數的功能，從而準備將對象字段用於綁定。在 Person 對象定義之後調用 WinJS.Class.mix（你需要先定義 Person 類，然後纔可以將任何對象與其混合）。
JavaScript
WinJS.Class.mix(Person, WinJS.Binding.mixin, WinJS.Binding.expandProperties({name: "", color: ""}) );

還需要在 Person 構造函數內調用 _initObservable 以設置 _backingData 屬性。按照如下方式更改 Person 構造函數：

JavaScript


...
function () {
    this._initObservable();

    this.name = "Harry";
    this.color = "blue";
    this.timeout = null;
    }
...

在已實例化某個 Person 對象之後，你可以將其綁定到兩個屬性。bind 方法帶有兩個參數：要綁定的屬性或字段的名稱，以及指定如何綁定函數的函數。此函數有兩個參數：新值和舊值。由於bind 爲實例方法，因此目前我們只是在其名稱和顏色字段上實例化 Person 並調用 bind。在調用WinJS.Class.mix 之後立即添加以下代碼。
JavaScript
var myPerson = new Person(); myPerson.bind("name", onNameChange); myPerson.bind("color", onColorChange); function onNameChange (newValue) { var span = document.getElementByIdx_x("bindableSpan"); span.innerText = newValue; } function onColorChange (newValue) { var span = document.getElementByIdx_x("bindableSpan"); span.style.color = newValue; }
警告不要試圖將數據綁定到 HTML 元素的 ID。

若要使更改事件發生，則必須更改 _newname 函數，以便該函數使用 setProperty 方法。

JavaScript


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

可以通過調用 start 方法來測試綁定。
JavaScript
myPerson.start();
構建並運行應用時，應看到以下內容：

Welcome, Harry（歡迎你，哈里）

名稱和名稱顏色應不斷更改。

步驟 4: 將綁定對象作爲激活過程的一部分添加

現在，我們將獲取對 Person 對象的生存時間的更多控制，方法是在激活處理程序中實例化並綁定該對象，在卸載處理程序中解除綁定並破壞該對象。

將激活和卸載事件處理程序作爲 WinJS.Utilities.ready 函數的一部分添加。此函數在DOMContentLoaded 事件之後被立即調用，而該事件在解析頁面之後，但在加載所有資源之前觸發。

JavaScript


var myPerson = new Person();

WinJS.Utilities.ready(function () {
    WinJS.Application.addEventListener("activated", activatedHandler);
    WinJS.Application.addEventListener("unload", unloadHandler);
  }, false);

function activatedHandler(e) {
    myPerson.bind("name", onNameChange);
    myPerson.bind("color", onColorChange);
    myPerson.start();
}

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

function onColorChange (newValue) {
    var span = document.getElementByIdx_x("bindableSpan");
    span.style.color = newValue;
}

function unloadHandler(e) {
    myPerson.stop();
    myPerson.timeout = null;
    myPerson.unbind("name", onNameChange);
    myPerson.unbind("color", onColorChange);
    myPerson = null;
}

完整示例

下面是本主題中代碼的完整列表。

JavaScript


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ObjectBinding</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ObjectBinding references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="objectBinding">
        Welcome
        <span id="bindableSpan"></span>
    </div>
    <script type="text/javascript">
        var Person = WinJS.Class.define(
            function () {
                this._initObservable();
                this.name = "Harry";
                this.color = "blue";
                this.timeout = null;
            }, {

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

                _newName: function () {
                    this.setProperty("name", this._nameArray[this._randomizeValue()]);
                    this.setProperty("color", this._colorArray[this._randomizeValue()]);
                },
                
                _randomizeValue: function () {
                    var value = Math.floor((Math.random() * 1000) % 8);
                    if (value < 0)
                        value = 0;
                    else if (value > 9)
                        value = 9;
                    return value;
                },

                start: function () {
                    var that = this;
                    if (this.timeout === null) {
                        this.timeout = setInterval(function () { that._newName(); }, 500);
                    }
                },

                stop: function () {
                    if (this.timeout !== null) {
                        clearInterval(this.timeout);
                        this.timeout = null;
                    }
                }
            });

        WinJS.Class.mix(Person,
            WinJS.Binding.mixin,
            WinJS.Binding.expandProperties({ name: "", color: "" })
        );

        var myPerson = new Person();

        WinJS.Utilities.ready(function () {
            WinJS.Application.addEventListener("activated", activatedHandler);
            WinJS.Application.addEventListener("unload", unloadHandler);
        }, false);

        function activatedHandler(e) {
            myPerson.bind("name", onNameChange);
            myPerson.bind("color", onColorChange);
            myPerson.start();
        }

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

        function onColorChange (newValue) {
            var span = document.getElementByIdx_x("bindableSpan");
            span.style.color = newValue;
        }

        function unloadHandler(e) {
            myPerson.stop();
            myPerson.timeout = null;
            myPerson.unbind("name", onNameChange);
            myPerson.unbind("color", onColorChange);
            myPerson = null;
        }
</script>
</body>
</html>

//////////////////////////////////////default.js//////////////////////////////////

// For an introduction to the Blank template, see the following documentation:

// http://go.microsoft.com/fwlink/?LinkId=232509

(function () {

"use strict";

WinJS.Binding.optimizeBindingReferences = true;

var app = WinJS.Application;

var activation = Windows.ApplicationModel.Activation;

app.onactivated = function (args) {

if (args.detail.kind === activation.ActivationKind.launch) {

if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

// TODO: This application has been newly launched. Initialize

// your application here.

} else {

// TODO: This application has been reactivated from suspension.

// Restore application state here.

}

args.setPromise(WinJS.UI.processAll());

}

};

app.oncheckpoint = function (args) {

// TODO: This application is about to be suspended. Save any state

// that needs to persist across suspensions here. You might use the

// WinJS.Application.sessionState object, which is automatically

// saved and restored across suspension. If you need to complete an

// asynchronous operation before your application is suspended, call

// args.setPromise().

};

app.start();

})();

///////////////////////////////////////////////default.html////////////////////

<!DOCTYPE html>

<html>

<head>

<title>ObjectBinding</title>

</head>

<body>

Welcome

</div>

var Person = WinJS.Class.define(

function () {

this._initObservable();

this.name = "Harry";

this.color = "blue";

this.timeout = null;

}, {

_nameArray:

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

_colorArray:

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

_newName: function () {

this.setProperty("name", this._nameArray[this._randomizeValue()]);

this.setProperty("color", this._colorArray[this._randomizeValue()]);

_randomizeValue: function () {

var value = Math.floor((Math.random() * 1000) % 8);

if (value < 0)

value = 0;

else if (value > 9)

value = 9;

return value;

start: function () {

var that = this;

if (this.timeout === null) {

this.timeout = setInterval(function () { that._newName(); }, 500);

}

stop: function () {

if (this.timeout !== null) {

clearInterval(this.timeout);

this.timeout = null;

}

});

WinJS.Class.mix(Person,

WinJS.Binding.mixin,

WinJS.Binding.expandProperties({ name: "", color: "" })

);

var myPerson = new Person();

WinJS.Utilities.ready(function () {

WinJS.Application.addEventListener("activated", activatedHandler);

WinJS.Application.addEventListener("unload", unloadHandler);

}, false);

function activatedHandler(e) {

myPerson.bind("name", onNameChange);

myPerson.bind("color", onColorChange);

myPerson.start();

}

function onNameChange(newValue) {

var span = document.getElementByIdx_x("bindableSpan");

span.innerText = newValue;

}

function onColorChange(newValue) {

var span = document.getElementByIdx_x("bindableSpan");

span.style.color = newValue;

}

function unloadHandler(e) {

myPerson.stop();

myPerson.timeout = null;

myPerson.unbind("name", onNameChange);

myPerson.unbind("color", onColorChange);

myPerson = null;

}

</script>

</body>

</html>

//////////////////////////////////////////////////////////////////////////

jimha147

發佈了76 篇原創文章 · 獲贊 4 · 訪問量 3萬+

私信關注

win8_綁定複雜對象

先決條件

說明

步驟 1: 設置項目以使用綁定

步驟 2: 設置複雜對象

步驟 3: 將對象綁定到 HTML

步驟 4: 將綁定對象作爲激活過程的一部分添加

完整示例

//////////////////////////////////////default.js//////////////////////////////////

《日本蠟燭圖》讀書筆記 & 技術分析回測

《期貨-市場技術分析》讀書筆記

Python多線程編程深度探索：從入門到實戰

mongodb處理json數據很好

[轉帖]cpupower

35K*14 薪，入職了！這公司只要不裁員，我能一直呆下去！

WinJS.xhr function (Windows)

win8_綁定數據和樣式（使用 J…

VB_Dim語句的功能及用法

Javascript_attachEvent()

常用控件的縮寫記錄

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結