淘汰赛初学者指南：第2部分

钥匙要点

库支持条件和样式绑定，例如`cisible'，`eNable'和`css''，使开发人员能够基于数据模型状态动态地控制元素可见性并动态造型。
• >高级功能，例如下拉列表的“选项”绑定和复选框和无线电按钮的`'checked'绑定提供了可靠的工具，可用于处理UI中更复杂的表单元素。
>
敲除初学者指南：绑定
淘汰赛为最常见的任务和方案提供了一组有用的内置绑定。这些绑定中的每一个都可以绑定简单的数据值或使用JavaScript表达式来计算适当的值。这提供了很大的灵活性，并且可以轻松地以最少的精力来创建非常动态的UI。
• 使用内置绑定的语法是包括敲除绑定名称和HTML元素的数据绑定属性内部的视图模型属性对。

如果要数据绑定到HTML元素中的多个属性，只需使用此语法通过逗号分隔绑定：

>您应该记住，大多数绑定试图将任何参数转换为布尔值。如果您给出实际上并非布尔值的价值，它将被松散地解释为真实或虚假。这意味着非零的数字和非零对象和非空字符串都将被解释为真实，而零，空，未定义和空字符串将被解释为false。

如果您了解如何使用一种类型的数据绑定，那么其他数据应该很容易学习。现在，我们将通过提供描述和简短的例子来解释它们中的每个人。>

简单绑定

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

>在与上一个教程中的可观察到的处理时，我们已经看到文本具有绑定。它将关联元素的文本设置为参数的值。这等同于设置DOM元素的innertext（对于IE）或文本概要（对于其他浏览器）属性。如果您的参数是数字或字符串以外的其他内容，则绑定将把toString（）的结果分配给元素。

>

如果此参数是可观察的值，则绑定将在值更改时更新元素的文本。如果该参数不可观察到，它将仅设置元素的文本一次，并且以后不会再次更新。这对所有绑定都是有效的。

>文本绑定通常用于在跨度或div元素中显示值。使用时，任何以前的文本都将被覆盖。

>

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

值绑定将关联元素的值设置为参数的值。这通常用于表单元素，例如输入，选择和textarea。当用户在关联的表单控件中编辑值时，它会更新视图模型上的值。同样，当您更新视图模型中的值时，这会更新屏幕上表单控件的值。这被称为双向绑定。如果您的参数是数字或字符串以外的其他内容，则绑定将把ToString（）的结果分配给元素。

默认情况下，当用户将焦点转移到另一个DOM节点（更改事件）时，淘汰赛会更新视图模型，但是您可以使用下面描述的valueupdate参数来控制值何时更新值。如果您的绑定还包括一个称为valueupdate的参数，则定义浏览器事件敲除应用于检测更改的参数。

“更改”是默认事件，当用户将焦点移至其他控件或元素时，它会在任何更改后立即更新视图模型。

>

“ afterkeydown” - 用户开始键入字符后立即更新您的视图模型。这是通过捕获浏览器的键盘事件并异步处理活动的工作来起作用。如果您想实时使用“ afterkeydown”实时更新视图模型，这将是最佳选择。

>

“键” - 当用户发布键

时，将更新视图模型

“键盘” - 当用户输入键时，将更新视图模型。如果用户将密钥降低

，则可以重复更新

<span data-bind="text: msg, visible: toggle"></span>

控制标记向上

>不经常使用HTML绑定，但是在视图模型中渲染HTML内容非常方便。该绑定将关联元素的HTML设置为参数的值，并且等效于在DOM元素上设置InnerHTML属性。如果您的参数是数字或字符串以外的其他内容，则绑定将把toString（）的结果分配给元素。

>

>由于使用InnerHTML设置了元素的内容，因此您应该小心不要将其与不受信任的模型值一起使用，因为这可能会打开脚本注入攻击的可能性。如果您不能保证内容可以安全显示，则可以使用文本绑定。>

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

敲除具有许多内置绑定，但您肯定会遇到某些情况，而这些情况都不存在。对于这些，敲除提供了attring绑定，它使您可以数据将任何属性绑定到视图模型属性。参数应为javaScript对象，其中属性名称为属性，属性值是将绑定到属性的值。这在许多常见场景中非常有用，例如绑定A元素的HREF和标题或IMG元素的SRC和ALT。

添加样式

<span data-bind="text: msg, visible: toggle"></span>

>您可以使用CSS和样式内置绑定将样式与淘汰赛绑定。>

> CSS绑定为关联元素设置一个或多个CSS类。该参数应为JavaScript对象，其中属性名称对应于所需的CSS类，并且评估为true或false的属性值表示是否应应用该类。您可以一次设置多个CSS类。

>

您可以使用表达式来确定何时应用课程。

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

>最好尽可能使用CSS类，但有时您可能也需要设置特定样式。淘汰赛以其样式内置绑定为此支持，该绑定为关联元素设置一个或多个样式值。参数应为一个对象，其属性对应于CSS样式名称，并且值对应于您希望应用的样式值。通常，此参数值使用JSON声明。

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

注意：当您具有属性或CSS类的名称不是法律JavaScript变量名称时，则应将标识符名称包装在引号中，以使其成为字符串的字符串。而且，如果您想应用其名称不是合法JavaScript标识符的样式，则必须使用该样式的JavaScript名称。

<div data-bind="html: markup"></div>

function viewModel() {
 var self = this;
 self.markup = ko.observable('<p><strong>Knockout</strong> is so <em>cool</em>!</p>')
};
ko.applyBindings(new viewModel());

处理事件

淘汰赛通过其内置绑定来支持任何事件的绑定。它将指定事件的事件处理程序添加到关联的DOM元素中。您可以使用它来绑定到任何定义的HTML事件。在事件处理程序中，您可以访问当前视图模型数据项，事件对象，甚至是事件绑定的一部分传递的自定义参数。要使用事件绑定，您可以通过一个包含事件名称的名称值对的对象和视图模型方法，并由逗号分隔。

<img data-bind="attr: {src: url, alt: details}" />

function viewModel() {
 var self = this;
 self.url = ko.observable(images/logo.png)
 self.details = ko.observable('This is logo')
};
ko.applyBindings(new viewModel());

您可能猜到的是，点击绑定正在处理点击事件。因为它是对事件的最使用的绑定，所以它只是事件绑定的捷径。>

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

>提交绑定是处理表单元素提交事件的快捷方式。当您在表单上使用提交绑定时，敲除将防止浏览器的默认提交措施为该表格。换句话说，浏览器将调用您的处理程序功能，但不会向服务器提交表单。这是一个有用的默认值，因为当您使用提交绑定时，通常是因为您将表单用作视图模型的接口，而不是作为常规HTML表单。如果您确实想让表单像普通的HTML表格一样提交，只需从您的提交处理程序中返回true。

>而不是在表单上使用提交，可以使用单击“提交”按钮。但是，使用提交绑定可以使用替代方法提交表格的好处，例如在输入文本框时按Enter键。

控制UI

可见绑定基于结合参数值设置关联元素的可见性。绑定尝试将任何参数转换为布尔值。敲除的可见绑定应绑定到评估对或错误的属性。这比您使用CSS定义的任何显示样式优先。

>

<span data-bind="text: msg, visible: toggle"></span>

启用/禁用绑定将根据所提供的值设置关联元素上的禁用属性。这通常用于表单元素，例如输入，选择和textarea。敲除提供内置绑定以启用和禁用输入元素。启用绑定将启用输入元素，如果属性必须评估为true，并且如果元素评估为false，则将禁用该元素。禁用绑定的完全相反

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

敲除具有内置的绑定命名hasfocus，它确定并设置哪个元素具有焦点。当您希望将焦点设置为表单上的特定元素时，例如搜索表单时，访问者打开页面

>时，hasfocus绑定很方便

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

处理复选框和无线电按钮

复选框可以是数据绑定到敲除的绑定。所检查的绑定应绑定到评估对或错误的属性或表达式。因为将视图模型属性定义为可观察到的，所以当源属性更改时，复选框会更新。同样，当用户检查或取消选中复选框时，该值将在视图模型属性中更新。此绑定设置了单个单击按钮和复选框的检查状态。对于复选框，绑定尝试将任何参数转换为布尔值。对于无线电按钮，绑定将按钮值属性与绑定参数进行比较。

// syntax: data-bind="bindingName: bindingProperty"
<span data-bind="text: msg"></span>

创建下拉列表

下拉列表具有几个重要属性，可以加载项目列表，显示值，使用其他键值并存储用户的选择。淘汰赛为每一种都提供了内置的绑定。选项绑定设置将出现在下拉列表元素中的选项。值应该是一个数组。除

元素以外，该绑定不能与其他任何内容一起使用。对于多选列表，要设置选择哪些选项，或者要读取选择哪些选项，请使用SelectedOptions绑定。对于单个选择列表，您还可以使用值绑定的值读取选定的选项。

绑定的选项标识要显示的值列表，通常是从视图模型上的数组属性。

。

当前选择了多选列表中哪些元素的选定绑定控件。当用户在多选列表中选择或删除选择项目时，这会添加或删除视图模型上的数组的相应值。>

<span data-bind="text: msg, visible: toggle"></span>

>有时您想在下拉列表中显示一个值，但是当用户从列表中选择项目时，请使用另一个值。淘汰赛的内置选件和optionValue绑定有助于。 OptionStext绑定设置为从选项绑定中显示在下拉列表中显示的属性的字符串名称。 optionsValue绑定设置为属性的字符串名称，以绑定到下拉列表中项目的选定值。当您不想默认选择任何prticular选项时，选项会议很有用。此参数设置了一个文本，例如选项列表之上的“选择项目…”，并在未选择任何特定项目时显示。

<p>The tip of the day is: <span data-bind="text: tipOfTheDay"></span></p> 

function viewModel() {
 var self = this;
 self.tipOfTheDay = ko.observable('Relax.Take it easy!')
};
ko.applyBindings(new viewModel());

就这部分而言，请继续关注结局，下周同一时间！

>

经常询问有关淘汰赛的问题

<input data-bind="value: name, valueUpdate: 'afterkeydown'"></input>
<p data-bind="text: name"></p>

function viewModel() {
 var self = this;
 self.name = ko.observable()
};
ko.applyBindings(new viewModel());

>

> junckoutjs和其他JavaScript库之间有什么区别？

junckoutjs是一个JavaScript库，可帮助开发人员创建具有干净的基础数据模型的富含，响应式显示和编辑器用户界面。与其他JavaScript库不同，QuignoutJS使用模型视图模型（MVVM）设计模式，其中模型和视图是分开的，从而更容易管理复杂的数据驱动的接口。当数据模型更改并为将UI的各个部分连接到数据模型时，它还提供自动UI刷新。将UI部分连接到数据模型的声明绑定。这意味着您可以以易于理解和维护的方式轻松地将数据绑定到HTML元素。当数据模型更改时，QuintOutJS会自动更新UI的相关部分，从而消除了对手动DOM操作的需求。

> quotigoutjs可以与其他JavaScript库一起使用吗？它不会对您的技术堆栈的其余部分做出任何假设，因此可以与其他库或框架（例如jQuery，bootstrap甚至Angularjs）集成。

> nockutjs如何处理CSS绑定？ > >> nockoutjs中的观察值是什么？> 我如何将QuigentJS与服务器端技术使用？敲除可以与任何服务器端技术一起使用。它对您使用的服务器端语言不可知，因此您可以将其与PHP，.NET，Java，Ruby，Python或任何其他服务器端语言一起使用。您只需要向客户端发送JSON数据，然后使用QuintOutJS将此数据绑定到您的HTML。

>

> nockoutjs如何处理形式验证？

nockoutjs本身不提供任何内置的内置验证机制。但是，它可以轻松地与其他验证库（例如jQuery验证或敲除验证）进行集成，这是一个专门设计用于在QuintOutJs中形式验证的单独插件。

>我可以将quightoutjs用于移动应用程序开发吗？

虽然QuintOutJS主要是为Web开发而设计的，但它也可以与其他技术（如PhoneGap或Cordova）结合使用，可用于移动应用程序开发，这允许您要使用HTML，CSS和JavaScript创建本机应用程序。

> QuignSoutjs如何处理事件处理？

适合大规模应用程序？

是的，nockoutjs适用于小型和大型应用程序。它的MVVM设计模式使管理复杂的数据驱动接口变得更加容易，并且其可观察到的物体和绑定系统有助于保持代码的组织和可维护，即使对于大型应用程序也是如此。

以上是淘汰赛初学者指南：第2部分的详细内容。更多信息请关注PHP中文网其他相关文章！