欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

KnockoutJs快速入門教程

 更新時間:2016年05月16日 15:01:41   作者:Learning hard  
這篇文章主要為大家分享了KnockoutJs快速入門教程,了解KnockoutJs到底是什么?如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中,感興趣的小伙伴們可以參考一下

一、引言

之前這個系列文章已經(jīng)介紹Bootstrap,詳情請查看本文: 《Bootstrap入門教程》 ,由于最近項目中,前端是Asp.net MVC + KnockoutJs + Bootstrap來做的。所以我又重新開始寫這個系列。今天就讓我們來看看Web前端的MVVM框架——KnockoutJs。

二、KnockoutJs是什么?

做.NET開發(fā)的人應(yīng)該都知道,WPF中就集成了MVVM框架,所以KnockoutJs也是針對Web開發(fā)的MVVM框架。關(guān)于MVVM好處簡單點(diǎn)來說就是——使得業(yè)務(wù)邏輯代碼與頁面展示代碼分割開,使得前端項目更好維護(hù)。

之前,我們寫Web頁面的時候,JS代碼和Html代碼混合在一起,并且代碼中充斥著大量的DOM對象的操作。這樣代碼結(jié)構(gòu)非?;靵y。有了MVVM框架了,你可以將JS代碼和Html代碼分割開,并且數(shù)據(jù)操作部分更加簡單,只需要通過相應(yīng)的語法(data-bind)綁定到對應(yīng)的標(biāo)簽屬性顯示即可,從而加快開發(fā)速度。

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

KnockoutJS主要實現(xiàn)的功能有以下4點(diǎn):

聲明式綁定(Declarative Bindings):使用簡單的語法將模型數(shù)據(jù)關(guān)聯(lián)到DOM元素上。即"data-bind"語法
依賴跟蹤(Dependency Tracking):為轉(zhuǎn)變和聯(lián)合數(shù)據(jù),在模型數(shù)據(jù)之間建立關(guān)系。如商品總價是由各個商品項價格之和。此時商品總價和商品項就可以使用依賴跟蹤功能來建立關(guān)系。即由各個商品項的總價相加而得出。這種關(guān)系由KnockoutJs中computed函數(shù)完成。
UI界面自動刷新(Automatic UI Refresh):當(dāng)你的模型狀態(tài)改變時,UI界面的將自動更新。這點(diǎn)由observable函數(shù)完成。
模板(Templating):為您的模型數(shù)據(jù)快速編寫復(fù)雜的可嵌套UI。和WPF中模板的概念類似。
接下來,我們通過具體的例子來讓大家快速掌握KnockoutJs的使用。

三、聲明式綁定
下面讓我們看下如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中。

1.單向綁定

<!DOCTYPE html>

<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Demo1-單向綁定</title>
 <script type="text/javascript" src="/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>
 
  <!--這段腳本實際項目中應(yīng)該放在對應(yīng)的JS文件中,然后在html中通過Script標(biāo)簽來引用即可-->
  <!--JS代碼也就是業(yè)務(wù)邏輯部分,將業(yè)務(wù)邏輯與Html代碼分割開,使得View代碼更加簡潔,這樣后期也易于維護(hù)-->
  <script type="text/javascript">
   function ViewModel() {
    this.firstName = "Tommy";
    this.lastName = "Li";
   }
   ko.applyBindings(new ViewModel());
  </script>
 </body>
</html>


2. 上面的例子只是完成了單向綁定的操作。即在上面的例子你會發(fā)現(xiàn),當(dāng)改變input標(biāo)簽中的值并離開焦點(diǎn)時,上面的值不會更新。其實,KnockoutJS中自動更新功能不會自動添加的,需要對應(yīng)的函數(shù)支持,這個函數(shù)就是observable函數(shù),下面具體看看雙向綁定的例子:

<!DOCTYPE html>

<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Demo2-雙向綁定</title>
 
 <script type="text/javascript" src="/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>


四、依賴跟蹤
接下來讓我們看下如何使用KO中的computed函數(shù)來完成依賴跟蹤。具體例子的實現(xiàn)代碼如下所示:

<!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="/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>

接下來,讓我們看一下使用聲明式綁定和依賴跟蹤復(fù)雜點(diǎn)的例子。具體示例代碼如下:

<!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 學(xué)習(xí)筆記", 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>

五、模板
看完以上幾個例子,其實你應(yīng)該感覺到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="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
 <body>
  <!--模板綁定,div的內(nèi)容為personTemplate模板內(nèi)的標(biāo)簽-->
  <!--即最終生成如下標(biāo)簽-->
  <!--<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>


<!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>


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

六、總結(jié)
到此,KnockoutJs的快速入門的內(nèi)容就結(jié)束了,在下一篇文章中繼續(xù)為大家介紹KO內(nèi)容,下一篇文章的內(nèi)容將介紹如何使用KO來做一個實際的項目,大家不要錯過哦。

相關(guān)文章

  • JS簡單計算器實例

    JS簡單計算器實例

    這篇文章主要介紹了JS簡單計算器的實現(xiàn)方法,以加法實例分析了js實現(xiàn)計算功能的技巧,需要的朋友可以參考下
    2015-01-01
  • 通過js修改input、select默認(rèn)字體顏色

    通過js修改input、select默認(rèn)字體顏色

    這篇文章主要介紹了通過js修改input、select默認(rèn)字體顏色,需要的朋友可以參考下
    2017-04-04
  • es6學(xué)習(xí)筆記之Async函數(shù)的使用示例

    es6學(xué)習(xí)筆記之Async函數(shù)的使用示例

    async 函數(shù),使得異步操作變得更加方便。它是 Generator 函數(shù)的語法糖。下面這篇文章主要給大家介紹了es6學(xué)習(xí)筆記之Async函數(shù)使用的相關(guān)資料,文中給出了詳細(xì)的示例代碼,需要的朋友們下面來一起看看吧。
    2017-05-05
  • JavaScript數(shù)組的使用詳解

    JavaScript數(shù)組的使用詳解

    這篇文章主要介紹了JavaScript數(shù)組的使用方法,數(shù)組(Array)是有序的元素序列。若將有限個類型相同的變量的集合命名,那么這個名稱為數(shù)組名,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • 原生js實現(xiàn)點(diǎn)擊輪播切換圖片

    原生js實現(xiàn)點(diǎn)擊輪播切換圖片

    這篇文章主要為大家詳細(xì)介紹了原生js點(diǎn)擊輪播切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • JS正則表達(dá)式驗證中文字符

    JS正則表達(dá)式驗證中文字符

    本篇文章主要介紹了JS正則表達(dá)式驗證中文字符的相關(guān)知識,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-05-05
  • drag-and-drop實現(xiàn)圖片瀏覽器預(yù)覽

    drag-and-drop實現(xiàn)圖片瀏覽器預(yù)覽

    chrome的drag and drop API,它能將本地的圖片放到瀏覽器中進(jìn)行預(yù)覽,猜想一下當(dāng)我們把圖片拖拽到瀏覽器里會發(fā)生什么事情,你的瀏覽器試圖打開一個新的頁面并加載這個圖片。這篇文章給我們介紹drag-and-drop實現(xiàn)圖片瀏覽器預(yù)覽,需要的朋友可以參考下
    2015-08-08
  • echarts柱狀堆疊圖實現(xiàn)示例(圖例和x軸都是動態(tài)的)

    echarts柱狀堆疊圖實現(xiàn)示例(圖例和x軸都是動態(tài)的)

    一些柱形圖在數(shù)據(jù)量比較多的時候,橫向排列受到擠壓,導(dǎo)致柱形圖,變的非常細(xì),影響整體的效果,下面這篇文章主要給大家介紹了關(guān)于echarts柱狀堆疊圖(圖例和x軸都是動態(tài)的)的相關(guān)資料,需要的朋友可以參考下
    2023-04-04
  • 七種JS實現(xiàn)數(shù)組去重的方式

    七種JS實現(xiàn)數(shù)組去重的方式

    這篇文章主要介紹了七種JS實現(xiàn)數(shù)組去重的方式,下面文章以JS數(shù)組去重的相關(guān)資料展開全文內(nèi)容,具有一定的參考價值,需要的小伙伴可以參考一下
    2021-12-12
  • js/jQuery實現(xiàn)全選效果

    js/jQuery實現(xiàn)全選效果

    這篇文章主要為大家詳細(xì)介紹了js/jQuery兩種代碼實現(xiàn)全選效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-06-06

最新評論