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

鑰匙要點

• >利用opjotoutj中的“ foreach”綁定自動複製和綁定數組中每個項目的標記段，例如基於數組數據動態生成表行或列表項目。
>
• >在嵌套綁定中的``$ data'，$ parent'，$ parent'，``$ parent`和'$ root''中的偽伏型，以有效地從視圖模型層次結構的不同級別訪問和操縱數據。
>
• 。
>用``If''和`用'綁定來實現``'''and'，以渲染UI的有條件的部分並建立新的綁定上下文，增強應用程序的動態和可讀性。
• >探索淘汰賽的模板功能，該功能允許使用控制流綁定和高級方案使用“模板”綁定，並使用“ template”綁定，並帶有傳遞其他參數和回調的選項。
>
• >擴展敲除觀測值並創建自定義綁定以封裝複雜的行為和交互，提供可重複使用的解決方案，以維護乾淨且可管理的代碼庫。
>

>有四個控制流綁定：foreach，如果，ifnot and with。這些控制綁定允許您聲明地定義控制流邏輯而無需創建命名模板，如下所示。

foreach綁定在數組中為每個條目重複一個標記部分，並將該標記的每個副本綁定到相應的數組項目。這適用於渲染列表或表。如果您的數組是可觀察的數組，則每當您以後添加或刪除數組條目時，綁定將通過插入或刪除列表項或表行的更多副本來更新UI以匹配，而不會影響任何其他DOM元素。請參閱以下示例：

>在這裡，將為書籍數組中的每個數組條目自動創建一個表行。

有時，您可能需要參考數組條目本身，而不僅僅是其屬性之一。在這種情況下，您可以使用偽可行的$數據。它的意思是“當前項目”，當在foreach塊中使用時。

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

這將列出一周中的整個天數，而無需分別重複每個項目的代碼。 > 在淘汰賽中，您可以根據需要嵌套盡可能多的控制流綁定。而且，當您這樣做時，通常希望從父上下文中恢復層次結構並訪問數據或功能。在這種情況下，您可以使用以下偽伏算：

$ parent - 表示當前foreach塊之外的數據項

<ul data-bind="foreach: daysOfWeek">
 <li>
 <span data-bind="text: $data"></span>
 </li>
</ul>

<script type="text/javascript">
function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
   'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
};

ko.applyBindings(new viewModel());
</script>

$ parents - 是一個代表所有外部控制流範圍的數據項的數組。 $父母[0]與$ parent。 $父母[1]代表祖父母控制範圍的項目，依此類推。

$ root - 表示最外面控制流範圍的項目。通常，這是您的頂級視圖模型對象。

在以下示例中，我們使用$ parent pseudovariable，以便從書籍數組中正確刪除書籍項目：

<table>
 <thead>
  <tr><th>Title</th><th>Author</th></tr>
 </thead>
 <tbody data-bind="foreach: books">
  <tr>
   <td data-bind="text: title"></td>
   <td data-bind="text: author"></td>      
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  function viewModel() {
   var self = this;
   self.books = ko.observableArray([
     { title: 'The Secret', author: 'Rhonda Byrne' },
     { title: 'The Power', author: 'Rhonda Byrne' },
     { title: 'The Magic', author: 'Rhonda Byrne' }
   ]);
  }
  ko.applyBindings(new viewModel());    
</script>

在某些情況下，您可能需要復制一部分標記，但是您沒有任何容器元素可以放置限制性。然後，您可以使用以下語法：

<ul data-bind="foreach: daysOfWeek">
 <li>
 <span data-bind="text: $data"></span>
 </li>
</ul>

<script type="text/javascript">
function viewModel() {
  var self = this;
  self.daysOfWeek = ko.observableArray([
   'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ]);
};

ko.applyBindings(new viewModel());
</script>

在此示例中，您不能使用普通的for for binting。如果將其放在
上，這將復制標題項目，如果要在
內放置一個其他容器，則不能在
s內允許
• 元素。解決方案是使用無容器控制流語法，其中 and 評論定義了一個“虛擬元素”，其中包含內部標記，語法敲除可以理解並綁定的“虛擬元素”這個虛擬元素好像您有一個真實的容器元素。這種類型的語法也適用於IF和具有綁定的有效。

  >

  if綁定會導致標記部分出現在您的文檔中，只有當指定的表達式評估為true時。然後，文檔中將存在包含的標記，並且將應用其上的任何數據綁定屬性。另一方面，如果您的表達式評估為false，則包含的標記將從您的文檔中刪除，而無需先對其施加任何綁定。

  >

  帶有綁定的創建一個新的綁定上下文，因此後代元素在指定對象的上下文中綁定。您要用作綁定後代元素的上下文的對象。如果您提供的表達式將評估為null或未定義，則根本不會綁定後代元素，而是將其從文檔中刪除。帶有綁定的數據將數據上下文更改為您指定的任何對象。當處理具有多個父/子關係的對像圖時，這特別有用。

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  >
  templating

  <ul>
  <li><strong>Days of week:</strong></li>
   <!-- ko foreach: daysOfWeek -->
   <li>
    <span data-bind="text: $data"></span>
   </li>
   <!-- /ko -->
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  模板結合使用呈現模板的結果填充了關聯的DOM元素。模板是構建複雜的UI結構（可能是重複或嵌套塊）的一種簡單便捷的方法，作為視圖模型數據的函數。使用模板有兩種主要方法。第一個本機模板是基礎固定的機制，即使用，使用和其他控制流結合物。在內部，這些控制流綁定捕獲了您元素中包含的HTML標記，並將其用作模板以呈現任意數據項。此功能內置在淘汰賽中，不需要任何外部庫。您可以在此處看到用於創建模板的基本方案：

  在以下示例中，您可以看到如何在行動中使用它：

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  >在這裡，我們必須使用模板名稱等於模板名稱的ID才能將模板綁定到我們的標記的其餘部分。在這種情況下，它是“書本”。

  >

  >而不是使用上述簡短的語法，我們可以將更多參數傳遞給模板綁定，這將使我們更精確地控制最終輸出。

  <ul data-bind="foreach: daysOfWeek">
   <li>
   <span data-bind="text: $data"></span>
   </li>
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  >在這裡，名稱是包含您希望渲染的模板的元素的ID；數據是將作為渲染模板的數據提供的對象；而後方是一個回調函數，可針對渲染的DOM元素調用。

  >以下示例等同於foreach綁定。在這裡，foreach作為參數傳遞給了模板綁定。

  >
  >您可以通過將匿名模板直接嵌入使用for for for for for for for binting的元素中來獲得完全相同的結果：>

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>
     <td><a href="#" data-bind="click: $parent.removeBook">Remove</a></td>
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
  
    self.removeBook = function() {
     self.books.remove(this);
    }
    }
    ko.applyBindings(new viewModel());    
  </script>

  使用模板的第二種方法是將基因淘汰賽連接到第三方模板引擎。敲除將使您的模型值傳遞給外部模板引擎，並將所得的標記字符串注入文檔。有關使用

  > jquery.tmpl

  <ul>
  <li><strong>Days of week:</strong></li>
   <!-- ko foreach: daysOfWeek -->
   <li>
    <span data-bind="text: $data"></span>
   </li>
   <!-- /ko -->
  </ul>
  
  <script type="text/javascript">
  function viewModel() {
    var self = this;
    self.daysOfWeek = ko.observableArray([
     'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
    ]);
  };
  
  ko.applyBindings(new viewModel());
  </script>

  和

  下劃線模板引擎的示例 擴展可觀察到的

  敲除觀測值提供了支持閱讀/寫作值並在該值更改時通知訂閱者所需的基本功能。但是，在某些情況下，您可能希望在可觀察的可觀察到的可觀察的屬性中添加其他功能。敲除擴展器提供了一種簡單而靈活的方法。

  創建擴展器涉及將函數添加到ko.extenders對象。該函數將可觀察到的本身作為第一個參數和第二個參數中的任何選項。然後，它可以返回可觀察到的東西，也可以返回新的東西，例如以某種方式使用原始觀察的計算可觀察的可觀察的東西。

  >

  >現在我們將創建一個可觀察的擴展器，該擴展器將添加顯示提示消息的能力。 >

  自定義綁定

  淘汰賽的內置綁定允許您處理大多數綁定方案，但是如果您遇到未涵蓋的專門綁定方案，則可以使用敲除創建自定義綁定，從而使您非常靈活地將復雜的行為封裝在一個易於重複的方式。例如，您可以以自定義綁定的形式創建交互式組件，例如網格，卡屏等。

  敲除綁定由兩種方法組成：init和更新。創建綁定就像使用這兩種方法創建對象並使用KO.BINDINGHANDLERS進行敲除一樣簡單。

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  INIT函數僅在第一次評估該元素的綁定時運行。這通常用於運行一次性初始化代碼或連接事件處理程序，使您根據UI中的事件更新視圖模型。

  更新功能提供了一種方法，當修改了相關的可觀察結果時。通常，這用於根據視圖模型的更改來更新您的UI。

  >

  啟動和更新功能提供了四個參數。通常，您將需要關注元素和valueAccessor參數，因為它們是將視圖模型鏈接到UI的標準方法。您實際上不必同時提供初始化和更新回調 - 如果您需要的話，您只需提供一個或另一個。

  元素參數可直接訪問包含綁定的DOM元素。 valueAccessor參數是一個函數，可讓您訪問傳遞給綁定的內容。如果您通過可觀察到的，那麼此功能的結果將是可觀察到的（而不是其值）。如果您在結合中使用了表達式，那麼ValueAccessor的結果將是表達式的結果。
  AllBindingSaccessor參數可讓您訪問在同一數據綁定屬性中列出的所有其他綁定。這通常用於訪問與這種綁定相互作用的其他綁定。這些綁定可能不會與它們相關聯，並且只是將其他選項傳遞給綁定的方法，除非您選擇將具有多個屬性的對像傳遞到主綁定中。例如，optionsValue，optionStext和optionscaption是僅將選項傳遞給選項綁定的綁定。 >

  > ViewModel參數將為模板之外的綁定提供訪問您的整體視圖模型。在模板內部，將其設置為被綁定到模板的數據。例如，當使用模板綁定的foreach選項時，視圖模型參數將設置為通過模板發送的當前數組成員。在大多數情況下，ValueAccessor會為您提供所需的數據，但是如果您需要對像在呼叫/應用函數時，ViewModel參數特別有用。

  >在下面的示例中，我們將創建一個自定義綁定，該綁定在焦點時縮放文本方面。
  首先，在INIT函數中，我們聲明，當元素焦點為焦點時，其值將設置為true，反之亦然。然後，在更新功能中，我們使用AllBindingAccessor參數將其他選項添加到我們的綁定 - scaleup和scaledown。我們使用ko.utils.unwrapobservable來獲取當前綁定的值，並檢查設置為true。如果是這樣，則將DOM元素縮放，否則將其縮放。

  >

  終於讓我們看一個示例，結合了可觀察的擴展器和scaleonfocus自定義綁定：

  <table>
   <thead>
    <tr><th>Title</th><th>Author</th></tr>
   </thead>
   <tbody data-bind="foreach: books">
    <tr>
     <td data-bind="text: title"></td>
     <td data-bind="text: author"></td>      
    </tr>
   </tbody>
  </table>
  
  <script type="text/javascript">
    function viewModel() {
     var self = this;
     self.books = ko.observableArray([
       { title: 'The Secret', author: 'Rhonda Byrne' },
       { title: 'The Power', author: 'Rhonda Byrne' },
       { title: 'The Magic', author: 'Rhonda Byrne' }
     ]);
    }
    ko.applyBindings(new viewModel());    
  </script>

  >您可以將可觀察的提示放在單獨的文件中，然後將它們包含在主文件中。這使得代碼模塊化，並允許您在需要時重新使用它。

  >

  就是這樣，伙計們！希望您喜歡這個系列。現在，您擁有所有必要的知識，可以繼續學習和實驗淘汰賽。有關更全面的示例和教程，您可以訪問淘汰網站，我建議您做。

  經常詢問有關淘汰賽的問題

  >

  > ko.utils.utils.unwrapobservable在quignoutjs中的wrapobservable？
  > ko.utils.utils.unwrapobservable在quignoutjs中的函數用於檢索可觀察到的當前值或不可觀察的值。當您不確定是否正在處理可觀察的或不可觀察的情況下，此功能特別有用。它允許您處理這兩種情況，而無需為每個情況編寫單獨的代碼。此功能是敲除效用函數的一部分，可提供其他功能，使使用可觀察到的功能更容易。

  >

  如何在quotningjs中使用foreach綁定工作？ >
  >

  一系列物品到您的HTML的一部分。它為數組中的每個項目複製關聯的DOM元素及其後代，創建一個循環。當您想顯示UI中的項目列表時，這特別有用。 foreach綁定還為每次迭代提供了一個上下文，使您可以使用$ Data關鍵字訪問當前項目。

  > nockoutjs中的映射插件是什麼？ >

  我如何與gockutjs中的集合一起工作？ >

  我在QuignOutJs中找到了一個問題，我可以在哪里報告？如果您在QuintOutJs中找到了問題，則可以在gockoutjs github頁面上報告。在報告問題之前，最好檢查其他人是否已經報告了該問題。如果沒有，您可以創建一個新問題並提供盡可能多的細節，以幫助淘汰賽團隊理解並解決該問題。

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

  >如何處理nockoutjs中的事件？ nockoutjs提供許多綁定，以處理諸如單擊，提交，提交，提交，提交，提交，提交，提交，提交，提交，提交，提交，提交，重點等。這些綁定允許您在發生關聯事件時指定可以執行的JavaScript函數。該函數可以是視圖模型的一部分或獨立函數的一部分。

  >我如何在quotigoutjs中使用自定義綁定？

  >如何使用瀏覽器的開發人員工具來完成debug quigning junckoutjs應用程序？您可以使用Console.Log打印值，或使用斷點暫停執行並檢查應用程序的當前狀態。 QuintOutJs還提供了KO.TOJSON函數，可以將您的視圖模型轉換為JSON字符串，以易於檢查。

  >

  我如何測試quignOutjs應用程序？

  測試quotegoutjs應用程序可以是使用JavaScript測試框架（例如茉莉花或摩托馬）完成。這些框架使您可以為您的視圖模型編寫單元測試，以確保它們的行為如預期的。在測試QuintOutJS應用程序時，最好盡可能地將視圖模型與DOM分開，以使測試更容易。

  >

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