淘汰赛初学者指南：第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中文网其他相关文章！