Knockout基本語(yǔ)法有哪些

本篇內(nèi)容介紹了“Knockout基本語(yǔ)法有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)百色免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1 Hello world

這個(gè)例子里，2個(gè)輸入框都被綁定到data model上的observable變量上?！癴ull name”顯示的是一個(gè)dependent observable，它的值是前面2個(gè)輸入框的值合并一起的結(jié)果。

無(wú)論哪個(gè)輸入框更新，都會(huì)看到“full name” 顯示結(jié)果都會(huì)自動(dòng)更新。查看HTML源代碼可以看到我們不需要聲明onchange事件。Knockout知道什么時(shí)候該更新UI。

代碼: View

First name: 
 
Last name: 
 
Hello,  !

代碼: View model

// 這里是聲明的view model   var viewModel = {      firstName: ko.observable("Planet"),      lastName: ko.observable("Earth")  };   viewModel.fullName = ko.dependentObservable(function () {      // Knockout tracks dependencies automatically.       //It knows that fullName depends on firstName and lastName,                 //because these get called when evaluating fullName.      return viewModel.firstName() + " " + viewModel.lastName();  });   ko.applyBindings(viewModel); // This makes Knockout get to work

2 Click counter

這個(gè)例子展示的創(chuàng)建一個(gè)view model并且綁定各種綁定到HTML元素標(biāo)記上，以便展示和修改view model的狀態(tài)。

Knockout根據(jù)依賴項(xiàng)。在內(nèi)部，hasClickedTooManyTimes在numberOfClicks上有個(gè)訂閱，以便當(dāng)numberOfClicks改變的時(shí)候，強(qiáng)制hasClickedTooManyTimes重新執(zhí)行。相似的，UI界面上多個(gè)地方引用hasClickedTooManyTimes，所以當(dāng)hasClickedTooManyTimes 改變的時(shí)候，也講導(dǎo)致UI界面更新。

不需要手工聲明或者訂閱這些subscription訂閱，他們由KO框架自己創(chuàng)建和銷毀。參考如下代碼實(shí)現(xiàn)：

代碼: View

You've clicked   times
    Click me         That's too many clicks! Please stop before you wear out your fingers.      Reset clicks 

代碼: View model

var clickCounterViewModel = function () {      this.numberOfClicks = ko.observable(0);        this.registerClick = function () {          this.numberOfClicks(this.numberOfClicks() + 1);      }        this.hasClickedTooManyTimes = ko.dependentObservable(function () {          return this.numberOfClicks() >= 3;      }, this);  };   ko.applyBindings(new clickCounterViewModel());

3 Simple list

這個(gè)例子展示的是綁定到數(shù)組上。

注意到，只有當(dāng)你在輸入框里輸入一些值的時(shí)候，Add按鈕才可用。參考下面的HTML代碼是如何使用enable 綁定。

代碼: View

     New item:            0">Add     
Your items:
       

代碼: View model

var viewModel = {};  viewModel.items = ko.observableArray(["Alpha", "Beta", "Gamma"]);  viewModel.itemToAdd = ko.observable("");  viewModel.addItem = function () {      if (viewModel.itemToAdd() != "") {          viewModel.items.push(viewModel.itemToAdd());          // Adds the item. Writing to the "items" observableArray causes any associated UI to update.           viewModel.itemToAdd("");                            // Clears the text box, because it's bound to the "itemToAdd" observable      }  }   ko.applyBindings(viewModel);

4 Better list

這個(gè)例子是在上個(gè)例子的基礎(chǔ)上添加remove item功能(multi-selection)和排序功能。 “remove”和“sort”按鈕在不能用的時(shí)候會(huì)變成disabled狀態(tài)(例如，沒(méi)有足夠的item來(lái)排序)。

參考HTML代碼是如何實(shí)現(xiàn)這些功能的，另外這個(gè)例子也展示了如何使用匿名函數(shù)來(lái)實(shí)現(xiàn)排序。

代碼: View

     Add item:       0">Add   
Your values:
    
      0">Remove      1">Sort 

代碼: View model

// In this example, betterListModel is a class, and the view model is an instance of it.   // See simpleList.html for an example of how to construct a view model without defining a class for it. Either technique works fine.   var betterListModel = function () {      this.itemToAdd = new ko.observable("");      this.allItems = new ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]);   // Initial items   this.selectedItems = new ko.observableArray(["Ham"]);                                  // Initial selection        this.addItem = function () {          if ((this.itemToAdd() != "") && (this.allItems.indexOf(this.itemToAdd()) < 0))      // Prevent blanks and duplicates          this.allItems.push(this.itemToAdd());          this.itemToAdd(""); // Clear the text box      }        this.removeSelected = function () {          this.allItems.removeAll(this.selectedItems());          this.selectedItems([]); // Clear selection      }  };   ko.applyBindings(new betterListModel());

“Knockout基本語(yǔ)法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！