Knockout學習筆記（一）--建立數據模型和監控屬性

時間 2019-11-11

標籤 knockout 學習筆記建立數據模型監控屬性简体版

原文原文鏈接

下面介紹下ko.applyBindings操做時使用的是什麼樣的參數：javascript

第一個參數是你想激活KO時用於聲明式綁定的View Model對象；html

第二個參數（可選），你可使用第二個參數來設置要使用data-bind屬性的HTML元素或容器。例如：java

ko.applyBindings(myViewModel, document.getElementById('someElementId'))

它限制了只有ID爲someElementId的元素才能激活使用KO功能，當你在一個頁面中聲明瞭多個View Model來綁定不一樣的界面區域時，這樣限制是頗有好處的。jquery

下面是一個建立最基礎的View-Model並綁定到ko的例子。ajax

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(document).ready(document_ready);
        function document_ready() {
            //建立View-Model
            var myViewModel = {
                userName: "Kitty"
            }
            //ko綁定View-Model對象
            ko.applyBindings(myViewModel);
        }
    </script>
</head>
<body>
<p>Hello:<span data-bind="text: userName"></span></p>
</body>
</html>

KO最重要的一個屬性就是當View Model發生變化時可以自動的更新UI界面。KO是如何可以知道你的View Model已經發生改變了呢？答案是：你須要將你的model屬性聲明成observable的, 由於它是很是特殊的JavaScript 對象，可以通知用戶它的改變以及自動檢測依賴關係。api

var myViewModel = {
personName: ko.observable('Bob'),
personAge: ko.observable(123)
};

你根本不須要對View進行更改，全部的data-bind語法依然正常工做。所不一樣的是，如今它可以自動檢測變化，並通知它自動更新界面（View）。瀏覽器

並非全部的瀏覽器都支持JavaScript的getters and setters (好比IE)，因此，爲了兼容，ko.observable監控的對象都是方法。app

Reading and writing observables

一、讀取當前監控的屬性值，只須要直接調用observable（不須要參數），在這個例子當中，調用myViewModel.personName()將會返回'Bob'，調用myViewModel.personAge() 將會返回'123'google

二、寫一個新值到監控屬性上，調用observable方法，將要寫的值做爲一個參數傳入便可。例如，調用myViewModel.personName('Mary') 將會把名稱改變成 'Mary'。spa

三、一次性改變Model對象監控的多個屬性值，你可使用鏈式方法。例如：myViewModel.personName('Mary').personAge(50) 將會把名稱改變成'Mary'將年齡設置爲 50.

監控屬性最重要的一點就是能夠隨時監控，也就是說，其餘代碼能夠告訴它哪些是須要通知發生變化的。這就是爲何KO會有如此多的內置綁定語法。因此，當你在頁面中編寫data-bind="text: personName"，text 會綁定註冊到自身，當personName發生變化時，它可以當即獲得通知。

當你經過調用 myViewModel.personName('Mary') 將名稱的值改變成爲'Mary'時，text綁定會自動更新新值到其對應的DOM對象元素上,這就是爲何改變數據模型可以自動刷新View頁面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(document).ready(document_ready);
        function document_ready() {
            //建立View-Model
            var myViewModel = {
                personName: ko.observable('Bob'),
                personAge: ko.observable(1)
            };
            function start(){
                setInterval(function(){
                    myViewModel.personAge(myViewModel.personAge()+1);
                    console.log(myViewModel.personAge());
                }, 1000);
            };

            //ko綁定View-Model對象
            ko.applyBindings(myViewModel);
            start();
        }

    </script>
</head>
<body>
<p>Hello:<span data-bind="text: personName"></span></p>
<p>personAge:<span data-bind="text: personAge"></span></p>
</body>
</html>

監控屬性（Observables）的顯式訂閱

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="jslib/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="jslib/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(document).ready(document_ready);
        function document_ready() {
            //建立View-Model
            var myViewModel = {
                personName: ko.observable('Bob'),
                personAge: ko.observable(1)
            };
            
            //顯示訂閱
            var subscription = myViewModel.personAge.subscribe(function (newValue) {
                console.log("newValue:"+newValue)
            });

            function start(){
                setInterval(function(){
                    myViewModel.personAge(myViewModel.personAge()+1);
                    console.log(myViewModel.personAge());
                    
                    //釋放訂閱方法
                    if (myViewModel.personAge() >= 5)
                        subscription.dispose();
                }, 1000);
            };

            //ko綁定View-Model對象
            ko.applyBindings(myViewModel);
            start();
        }

    </script>
</head>
<body>
<p>Hello:<span data-bind="text: personName"></span></p>
<p>personAge:<span data-bind="text: personAge"></span></p>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。