淘汰賽初學者指南：第1部分

鑰匙要點

敲除使用模型視圖模型（MVVM）設計模式，將您的應用程序分為三個部分：保存您的應用程序數據的模型，作為模型和視圖之間的連接器和通信層的視圖，查看指您應用程序中的所有UI元素。 > 可觀察物是敲對於j的特殊JavaScript對象，可以將更改通知訂閱者並自動檢測依賴關係。這允許視圖在模型更改時自動更新，而無需手動操縱DOM。 幾乎每個處理Web技術的人都知道JQuery，或者至少已經聽說過。它無與倫比的簡單性和簡潔性使世界各地數百萬個網絡開發人員的生活變得更加容易 - 這真是太棒了。 不幸的是，jQuery並不是解決每個問題的解決方案。一旦您決定創建一些更複雜的Web應用程序，就會遇到問題 - 沒有簡單的方法可以使您的UI和數據互相動態通信。憑藉JQuery提供的低級DOM操縱和事件處理，這很難實現。您需要一個圖書館，為您提供更複雜的UI和基礎數據模型之間的通信方式。
>這是淘汰賽的來源。淘汰賽是一個JavaScript庫，可幫助創建Rich，類似桌面的Web UIS。它簡化了用戶交互，並使接口完全響應任何數據源更改。敲除提供了一種簡單的雙向綁定機制，可以將數據模型與UI聯繫起來，從而使它們之間的同步變得微風。

>儘管您需要同時將淘汰賽與jQuery一起使用，但在某些情況下，例如動畫過渡，但敲除本身並不取決於它。您需要了解的另一件事是，淘汰賽不會與JQuery競爭 - 他們倆都做得很好。每個人都朝著自己的方向。如您所見，如果您想獲得最大的好處，則應該一起使用它們。

>在本教程中，我們從淘汰賽的核心概念和能力開始。在第二部分中，我們將更深入地探索內置綁定以及如何使用它們。在結局中，我們將介紹一些高級功能和技術，例如擴展可觀察物以及如何創建自己的自定義綁定。讓我們開始！

基本概念

>在我們瀏覽代碼示例之前，首先您可能需要掌握一些基本概念。敲除JavaScript的模型視圖模型（MVVM）設計模式。在此模式中，您的應用程序分為三個部分：

>

>一個符合您應用程序數據的模型。這可以由用戶輸入的數據或從Web服務器獲取的JSON數據。

>

>作為模型和視圖之間的連接器和通信層的視圖。它擁有數據和操作來操縱此數據並將其顯示在UI中。每次更改數據模型時，相應的UI零件更新，反映這些更改。您應用程序中的查看模型由JavaScript代碼表示。

a的視圖，指的是您應用程序中的所有UI元素。它是給定UI的結構和外觀的表示。該視圖負責顯示數據並接受用戶輸入。視圖由您的應用程序中的HTML/CSS代碼表示。

>

>它們是建立敲除時的三個核心概念：

1。聲明性綁定：這些允許您以簡單便捷的方式將UI的一部分連接到數據模型。當直接使用JavaScript操縱DOM時，如果以後更改DOM層次結構或元素ID，可能會導致損壞的代碼。即使您更改DOM所有綁定的零件，也可以使用聲明性綁定。您可以通過簡單地將數據綁定屬性包含到任何DOM元素來將數據綁定到DOM。

2。依賴關係跟踪：值得慶幸的是，每當您的模型數據更改與其自動更新的所有零件時，每次更改模型數據時，可觀察到的變量和特殊類型的變量。無需擔心添加活動處理程序和聽眾。所有這些額外的工作都是通過敲除和可觀察到的內部執行的，這些工作在基本值發生了變化時通知聽眾。

>

3。模板：當您的應用程序變得更加複雜並且需要一種顯示豐富的視圖模型數據結構，從而使代碼保持簡單時，這很方便。淘汰賽具有本機內置的模板引擎，您可以立即使用。但是，如果需要，也可以使用第三方模板引擎，例如jquery.tmpl或下劃線。

>不用擔心，如果您聽起來所有這些理論對您來說都是晦澀的。當我們瀏覽教程並示例代碼時，一切都會變得更清晰。

>

入門

>在我們深入淘汰之前，您需要在HTML文檔中下載和引用庫。

<script type='text/javascript' src='knockout-2.0.0.js'></script>

>將代碼與演示文稿分開，最好創建一個JavaScript文件來保存所有應用程序代碼。而且，由於我們在某些情況下也需要使用jQuery。

<script type='text/javascript' src='knockout-2.0.0.js'></script>

>這被認為是最佳實踐，但出於培訓目的，要使事情更容易，您可以通過將其包括在同一文檔中，或者將其包含在Head Tag中，或者將其放置在您的標記中。

現在，要創建一個視圖模型，只需聲明任何類似的JavaScript對象：

>

>數據結合屬性（稍後解釋）不是HTML的本地，並且瀏覽器不知道它的含義。因此，必須通過在腳本末尾插入ko.applybindings（）函數來激活敲除。另外，如果您使用外部JavaScript文件或將腳本放置在文檔的Head標籤中，則需要將敲除代碼包裹在jQuery就緒功能中，以便正常工作。這是要啟動的基本模板：

  function viewModel() {

   // Your code here
  
  };

>調用ko..applybindings（）方法並傳遞我們的視圖模型，告訴淘汰賽將指定的模型綁定到我們的UI。如果您只想將此視圖模型綁定到整體UI的一部分，則甚至可以提供DOM元素。 ko.applybindings（）採用兩個參數。第一個參數說明您要使用的聲明綁定要使用的視圖模型對象。第二個參數是可選的，它定義了您要搜索數據重點屬性的文檔的哪一部分。例如，ko.applybindings（viewModel，document.getElementById（'container'））將使用ID容器及其後代將激活限制為元素。如果您想擁有多個視圖模型並將每個區域的不同區域相關聯，這將很有用。

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

>

它的工作原理

>使用敲除，您可以通過在標記中包含一個指定要執行的數據結合的數據結合屬性來將數據綁定到DOM元素。該代碼從未對DOM結構有任何參考，因此您可以自由地更改HTML而不會破壞綁定。在下面的示例中，我們將文本綁定屬性添加到類似的跨度元素：

>

>那麼，如果我們要使文本的價值動態更新，則必須在視圖模型中將其聲明為可觀察的。

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

這將輸出“一周中的一天是星期天。是時候休息了。”

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel()); 

可觀察到

通過將對象屬性與名為ko.observable（）。 可觀察物被設置為函數。因此，您可以以以下方式使用它們：

<script type='text/javascript' src='knockout-2.0.0.js'></script>

淘汰賽不需要您使用可觀察的屬性。如果您希望DOM元素一次接收值一次，但是當源對像中的值更改中的值時，則不會更新，則簡單對象就足夠了。但是，如果您希望您的源對象和目標dom元素保持同步 - 雙向綁定 - 那麼您需要考慮使用可觀察的屬性。

在某些情況下，您可能需要將兩個或多個可觀察到的值組合為一個新值。這可以通過所謂的計算可觀察物來完成。計算的可觀察物是依賴一個或多個可觀察到的函數，並且每當這些依賴性變化時，都會自動更新。當它依靠其評估更改的任何可觀察到的屬性時，計算的屬性會自動更新。在下面的示例中，計算出的可觀察到的命名fulldate每天都會更新一天，月和年度可觀察到。

ko.competed（）採用第二個參數。沒有傳遞它，就不可能參考此.day.day（），this.month（）或this.year（）。為了簡化事物，您可以創建一個變量自我，從而避免添加第二個參數。從現在開始，我們將在代碼示例中使用此方法。

>

<script type='text/javascript' src='knockout-2.0.0.js'></script>

>處理一個對象時，您可以通過將其變成可觀察到的任何更改來輕鬆跟踪其更改。但是，如果您有多個對象怎麼辦？在這種情況下，敲除具有一個名為ko.observablearray（）的特殊對象，可以檢測並響應事物集合的變化。這使得可以顯示和/或編輯多個值，例如，當您需要重複的UI部分以添加和刪除項目時出現和消失時。

>

  function viewModel() {

   // Your code here
  
  };

>您應該牢記可觀察的數組跟踪哪些對像在數組中，而不是這些對象的狀態。簡單地將對象放入可觀察的陣列並不能使所有對象的屬性本身都可以觀察到。如果您希望可以觀察到這些屬性，但這完全取決於您。一個可觀察的數組只能跟踪其持有的對象，並在添加或刪除對象時通知偵聽器。

>

創建可觀察的數組時，您可以將其留空或用一些初始值填充它。在下面的示例中，我們創建了一個可觀察到的陣列，該陣列填充了一周的日子：>

如您所見，要讀取敲除數組，您可以使用任何本機JavaScript函數。但是淘汰有其自己的等效函數，語法更方便：

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

>有關可用功能的完整列表，您可以查看文檔。如果您喜歡閱讀這篇文章，您會喜歡學習的；從大師那裡學習新鮮技能和技術的地方。成員可以立即訪問SitePoint的所有電子書和交互式在線課程，例如Web的JavaScript編程。 經常詢問的問題（常見問題解答）

> junckoutjs和其他JavaScript庫之間有什麼區別？

junckoutjs是一個JavaScript庫，可幫助開發人員創建具有乾淨的基礎數據模型的富含，響應式顯示和編輯器用戶界面。與其他JavaScript庫不同，QuignOuTjs使用模型視圖 - 視圖模型（MVVM）設計模式，其中模型引用數據，視圖是數據的可視化表示，而ViewModel是模型和視圖之間的中間設備。這種模式允許明確的疑慮分開，使您的代碼更易於管理和測試。 >

>數據綁定在quotningjs中如何工作？一種在模型（您的數據）和視圖（網頁中的DOM元素）之間建立連接的方法。此連接允許您的數據更改以自動更新視圖，反之亦然。 Quignoutjs為常見任務（例如文本和價值綁定）提供了幾種內置綁定，您還可以為更複雜的場景創建自定義綁定。

nockoutjs中的可觀察力是什麼？可以將更改通知訂閱者並自動檢測依賴性的JavaScript對象。在QuignOutJs中，您使用可觀察到的物品自動更新視圖時，每當模型更改而無需手動操縱DOM。這使您的代碼更清潔且更易於維護。

>我如何在gockoutjs中使用計算的可觀察物？

計算的可觀察到的函數是依賴一個或多個其他觀察值的函數，並且隨時會自動更新這些依賴性中的任何一個都改變了。要創建可觀察到的計算的可觀察到的計算機，您可以使用ko.com的函數，傳遞返回計算值的函數。

>

>我如何處理quignOutJs中的事件？

> viewModel在junckoutjs中的作用是什麼？它負責維護視圖狀態，處理用戶操作並在必要時更新模型。 ViewModel不是數據的直接表示，而是該視圖的專門版本。

>

>我如何在quignOutJs中使用模板？

>如何調試opplug quackoutjs applications？ >可以使用瀏覽器的開發人員工具進行調試敲除應用程序。您可以使用ko.datafor和ko.contextfor函數檢查綁定到DOM元素的數據。此外，QuignOutJs提供了ko.tojson函數，可用於將您的ViewModel轉換為JSON字符串以進行易於檢查。

我可以與其他JavaScript庫一起使用nockoutjs？可以與其他JavaScript庫（如jQuery或Bootstrap）一起使用。 QuintOutJS並不能直接操縱DOM，而是根據對ViewModel的更改更新視圖，因此它不會干擾操縱DOM的其他庫。

以上是淘汰賽初學者指南：第1部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！