[後端人員耍前端系列]KnockoutJs篇:快速掌握KnockoutJs

来源:http://www.cnblogs.com/zhili/archive/2016/04/17/konckoutjsQuickStart.html
-Advertisement-
Play Games

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


一、引言

  之前這個系列文章已經介紹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元素中。

  1. 單向綁定
<!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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在這個展示,我們提供最好的網頁設計師10圖標生成器。這些圖標生成器是免費使用的,有些是與高級功能,將幫助你產生引人註目的和有吸引力的網頁為您的網站。 為了包起來,他們都可以自由下載,所以在。來,看看,選擇你的選擇。我們希望這個列表證明你是最好的。請隨時與你的朋友分享這份名單,也讓我們知道你對這本編輯 ...
  • 摘要: aTpl.js是一款模板插件,該插件支持ie5+,chrome等瀏覽器以及移動端瀏覽器,支持for和if語法,以及表達式。最近對aTpl.js模板插件增加了新的功能,支持字元串模板,同時增加了模板緩存功能。 項目地址:https://github.com/baixuexiyang/aTpl ...
  • 1、sessionStorage 2、localStorage 3、Database Storage 4、globalStorage 5、相容性 參考文獻 本地持久化存儲一直是本地客戶端程式優於 web 程式的一個方面。對於本地應用程式,操作系統會一共一個抽象層,用於存儲和獲取特定於應用程式的數據, ...
  • 1. jQuery入門 1.1. 優點 解決瀏覽器的相容性問題。 支持擴展,通過插件方式實現擴展,避免特性蠕變。 使用隱式迭代的技術,使方法的操作面向集合。如“.hide()” 使用方法鏈接編程方式,使多重操作集於一行。 強大的選擇符。 可靠的事件處理機制。 完善的Ajax。 行為層與結構層的分離。 ...
  • 字元x 字元 x\\ 反斜線字元\0n 帶有八進位值 0 的字元 n (0 <= n <= 7)\0nn 帶有八進位值 0 的字元 nn (0 <= n <= 7)\0mnn 帶有八進位值 0 的字元 mnn(0 <= m <= 3、0 <= n <= 7)\xhh 帶有十六進位值 0x 的字元 h ...
  • 對IE瀏覽器尤其是IE6的抱怨基本已進入麻痹狀態,偶爾甚至產生非常消極的想法:這個世界只有一個瀏覽器就好了,哪怕這唯一的瀏覽器就是IE6。當然,這樣的想法是非常病態的,馬上打消。本文裡面,介紹了10個很實但IE卻不支持的CSS屬性,列出這些屬性並不是為了數落IE(數落也沒用),而是你瞭解了哪些CSS ...
  • 數據綁定是在應用程式 UI 與數據源建立連接的過程。如果綁定正確數據,則當數據更改其值時,綁定到數據的UI屬性值會自動反映更改。DeviceOne支持靈活的數據綁定,使UI展示和數據可以清晰的分離。目前還不支持雙向綁定,只支持數據到展示的傳遞。使用DeviceOne開發App,你可以不使用任何數據b ...
  • 幾個知識點: HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML框架結構: <!DOCTYPE html> <html> <head> </head> <body> 此處為標簽內容 </body> </html> HTML屬性: class=“XXX” ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...