一、引言

　　之前這個系列文章已經介紹Bootstrap。由於最近項目中，前端是Asp.net MVC + KnockoutJs + Bootstrap來做的。所以我又重新開始寫這個系列。今天就讓我們來看看Web前端的MVVM框架——KnockoutJs。

二、KnockoutJs是什么？

　　做.NET開發的人應該都知道，WPF中就集成了MVVM框架，關於WPF系列可以參考我WPF系列：http://www.cnblogs.com/zhili/category/624221.html。所以KnockoutJs也是針對Web開發的MVVM框架。關於MVVM好處簡單點來說就是——使得業務邏輯代碼與頁面展示代碼分割開，使得前端項目更好維護。

　　之前，我們寫Web頁面的時候，JS代碼和Html代碼混合在一起，並且代碼中充斥着大量的DOM對象的操作。這樣代碼結構非常混亂。有了MVVM框架了，你可以將JS代碼和Html代碼分割開，並且數據操作部分更加簡單，只需要通過相應的語法（data-bind）綁定到對應的標簽屬性顯示即可，從而加快開發速度。

　　KnockoutJs也就是這樣一個MVVM框架。其實與其稱其框架，更准備地應該是一個MVVM類庫。因為它沒有MVVM框架是一個比較“重”的概念，其中應該包括路由等特性。而KnockoutJS中卻沒有，相比較，AngularJS應該稱為一個MVVM框架更加合適。

　　KnockoutJS主要實現的功能有以下4點：

聲明式綁定（Declarative Bindings）：使用簡單的語法將模型數據關聯到DOM元素上。即"data-bind"語法
依賴跟蹤（Dependency Tracking）：為轉變和聯合數據，在模型數據之間建立關系。如商品總價是由各個商品項價格之和。此時商品總價和商品項就可以使用依賴跟蹤功能來建立關系。即由各個商品項的總價相加而得出。這種關系由KnockoutJs中computed函數完成。
UI界面自動刷新(Automatic UI Refresh):當你的模型狀態改變時，UI界面的將自動更新。這點由observable函數完成。
模板(Templating)：為您的模型數據快速編寫復雜的可嵌套UI。和WPF中模板的概念類似。

　　接下來，我們通過具體的例子來讓大家快速掌握KnockoutJs的使用。

三、聲明式綁定

　　下面讓我們看下如何使用KnockoutJS中的data-bind語法來將模型數據綁定到DOM元素中。

單向綁定

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo1-單向綁定</title>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
    <body>
        <!--單向綁定-->
        <div>
            <p>First name: <strong data-bind="text: firstName"></strong></p>
            <p>Last name:  <strong data-bind="text: lastName"></strong></p>
            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name:  <input data-bind="value: lastName" /></p>
        </div>
    
        <!--這段腳本實際項目中應該放在對應的JS文件中，然后在html中通過Script標簽來引用即可-->
        <!--JS代碼也就是業務邏輯部分，將業務邏輯與Html代碼分割開，使得View代碼更加簡潔，這樣后期也易於維護-->
        <script type="text/javascript">
            function ViewModel() {
                this.firstName = "Tommy";
                this.lastName = "Li";
            }
            ko.applyBindings(new ViewModel());
        </script>
    </body>
</html>

　　在線演示地址：http://sandbox.runjs.cn/show/4nruobca

　　2. 上面的例子只是完成了單向綁定的操作。即在上面的例子你會發現，當改變input標簽中的值並離開焦點時，上面的值不會更新。其實，KnockoutJS中自動更新功能不會自動添加的，需要對應的函數支持，這個函數就是observable函數，下面具體看看雙向綁定的例子：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo2-雙向綁定</title>
    
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
<body>
    <!--雙向綁定-->
    <div>
        <p>First name: <strong data-bind="text: firstName"></strong></p>
        <p>Last name:  <strong data-bind="text: lastName"></strong></p>
        <p>First name: <input data-bind="value: firstName"/></p>
        <p>Last name:  <input data-bind="value: lastName" /></p>
    </div>

    <script type="text/javascript">
        function ViewModel() {
            this.firstName = ko.observable("Tommy");
            this.lastName = ko.observable("Li");
        }
        
        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

　　在線預覽地址：http://sandbox.runjs.cn/show/oe58jbs3

四、依賴跟蹤

　　接下來讓我們看下如何使用KO中的computed函數來完成依賴跟蹤。具體例子的實現代碼如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo3-依賴跟蹤</title>
   
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
<body>
    <!--雙向綁定-->
    <div>
        <p>First name: <strong data-bind="text: firstName"></strong></p>
        <p>Last name:  <strong data-bind="text: lastName"></strong></p>
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>Last name:  <input data-bind="value: lastName"/></p>
        <p>Full name:  <strong data-bind="text: fullName"></strong></p>
        <button data-bind="click: capitalizeLastName">LastName To Upper</button>
    </div>

    <script type="text/javascript">
        function ViewModel() {
            this.firstName = ko.observable("Tommy");
            this.lastName = ko.observable("Li");
            // 依賴跟蹤
            this.fullName = ko.computed(function () {
                return this.firstName() + " " + this.lastName();
            },this);
            
            // 通過代碼改變observable的值
            this.capitalizeLastName = function() {
                this.lastName(this.lastName().toUpperCase());
            };
        }

        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

　　在線預覽地址：http://sandbox.runjs.cn/show/t8yokfel

　接下來，讓我們看一下使用聲明式綁定和依賴跟蹤復雜點的例子。具體示例代碼如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo4-列表綁定</title>
    
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Amount</td>
                <td>Price</td>
            </tr>
        </thead>
        <tbody data-bind="foreach: items">
            <tr>
                <td data-bind="text: product.name"></td>
                <td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>
                <td data-bind="text: subTotal"></td>
                <td><a href="#" data-bind="click: $root.remove">Remove</a></td>
            </tr>
        </tbody>
    </table>
    <h3>Order Price: <span data-bind="text: price"></span></h3>
    <button data-bind="click: addComputer">Add a Computer</button>

    <script type="text/javascript">
        var products = [{ name: "Learnighard 學習筆記", price: 49 },
        { name: "小米Note", price: 999 },
            { name: "宏碁筆記本", price: 4999 }];

        // 訂單類
        function Order() {
            var self = this;
            this.items = ko.observableArray([
                new Item(products[0], 1),
                new Item(products[1],2)
            ]);
            // 訂單總價
            this.price = ko.computed(function() {
                var p = 0;
                for (var i = 0; i < self.items().length; i++) {
                    var item = self.items()[i];
                    p += item.product.price * item.amount();
                }
                return p;
            }, self);

            this.remove = function(item) {
                self.items.remove(item);
            };

            this.addComputer = function () {
                self.items.push(new Item(products[2], 1));
            };
        }

        // 訂單項類
        function Item(product, amount) {
            var self = this;
            this.product = product;
            this.amount = ko.observable(amount);
            // 訂單項總價
            this.subTotal = ko.computed(function() {
                return self.amount() * self.product.price;
            }, self);
        }
        
        ko.applyBindings(new Order());
    </script>
</body>
</html>

　　在線預覽地址為：http://sandbox.runjs.cn/show/109jsjvz

五、模板

　　看完以上幾個例子，其實你應該感覺到KO（KnockoutJS的簡稱）的上手還是非常簡單的。因為其語法都非常容易理解，接下來看下KO中模板的使用。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo5-模板綁定</title>
 
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
    <body>
        <!--模板綁定，div的內容為personTemplate模板內的標簽-->
        <!--即最終生成如下標簽-->
        <!--<div>
            <p>Name: <strong data-bind="text: name"></strong></p>
            <p>Age:  <strong data-bind="text: age"></strong></p>
        </div>-->
        <div data-bind="template:'personTemplate'"></div>
       
        <script id="personTemplate" type="text/html">
            <p>Name: <strong data-bind="text: name"></strong></p>
            <p>Age:  <strong data-bind="text: age"></strong></p>
        </script>

        <script type="text/javascript">
            var ViewModel = {
                name: ko.observable('Tommy'),
                age: ko.observable(28),
                makeOlder: function() {
                    this.age(this.age() + 1);
                }
            };
            
            ko.applyBindings(ViewModel);
        </script>
    </body>
</html>

View Code

　　在線預覽地址為：http://sandbox.runjs.cn/show/3fnpkvrs

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo6-模板綁定</title>
    
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
    <body>
        <h2>Participants</h2>
        Here are the participants:
        <div data-bind="template: { name: 'persontemplate', foreach: people }"></div>

        <script type="text/html" id="persontemplate">
            <h3 data-bind="text: name"></h3>
            <p>Age: <span data-bind="text: age"></span></p>
        </script>
        <script type="text/javascript">
            function MyViewModel() {
                this.people = [
                    { name: 'Tommy', age: 27 },
                    { name: 'Frank', age: 33 }
                ];
            }
            ko.applyBindings(new MyViewModel());
        </script>
    </body>
</html>

View Code

　　在線預覽地址為：http://sandbox.runjs.cn/show/kujxhfgv

　　關於模板更多的使用參考官方文檔：http://knockoutjs.com/documentation/template-binding.html。本文只列出了2中模板的使用。

六、總結

　　到此，KnockoutJs的快速入門的內容就結束了，在一篇文章中繼續為大家介紹KO內容，下一篇文章的內容將介紹如何使用KO來做一個實際的項目。

　　本文所有源碼下載地址：https://code.msdn.microsoft.com/KnockoutJs-d9472ff9

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [后端人員耍前端系列]Bootstrap篇：30分鍾快速掌握Bootstrap [后端人員耍前端系列]AngularJs篇：30分鍾快速掌握AngularJs [后端人員耍前端系列]KnockoutJs篇：使用KnockoutJs+Bootstrap實現分頁 [后端人員耍前端系列]KnockoutJs篇：使用WebApi+Bootstrap+KnockoutJs打造單頁面程序前端人員一定要掌握的PS技巧運維人員需要掌握的 2021年第一篇：后端開發人員也要會搭建VUE項目+antd 前端學習 node 快速入門系列 —— npm 快速Android開發系列網絡篇之Volley IT人員應該掌握的30種技能