客户端洞察

Knockout 针对 HTML 和 JavaScript 的内置绑定

John Papa

下载代码示例

挖空带来丰富的数据绑定实现对 HTML5 和 JavaScript 发展。一旦您掌握了可观测量的概念，滑入挖空与发展最简单的方法就是了解它提供了内置的绑定的品种。挖空的内置绑定是最简单的方法，点击它的数据绑定功能，并将强大的数据绑定添加到您的 HTML5 应用程序的许多方面。前一列介绍了挖空，涵盖了其各种类型的观测量并探讨流内置绑定的控件。这次我会深入进一步进挖空的内置绑定。您可以从下载的代码示例， archive.msdn.microsoft.com/mag201203ClientInsight，演示如何使用各种内置绑定和解释的方案中，您可能要使用它们。

您可以从下载最新版本的挖空 （目前 2.0.0) bit.ly/scmtAi ，并在您的项目中引用它，或者您可以使用 NuGet 软件包管理器 Visual Studio 扩展 （可在 bit.ly/dUeqlu) 下载挖空。

在挖空的内置绑定是什么？

在其最基本的级别，数据绑定需要 （例如，JavaScript 对象） 绑定源和目标来绑定到 （HTML 元素，例如）。绑定源通常被称为视图模型。目标元素有几个属性，因此必须知道要绑定的以及哪些目标属性。例如，如果要将您查看模型名字属性绑定到输入的标记文本，你会想将绑定到挖空值绑定。在此情况下，挖空通过其内置的绑定之一标识目标属性：值。挖空内置绑定允许您将绑定到属性，以及您查看模型的方法。挖空包括许多内置的绑定将视图模型属性绑定到目标元素，我将在本文中讨论。

使用内置的绑定语法是包括挖空绑定名称和视图模型属性对内部的数据绑定属性的 HTML 元素。如果你想要的数据绑定到多个属性的 HTML 元素中，只需单独绑定由逗号使用此语法：

data-bind="built-in-binding:viewmodel-property1, another-built-in-binding:viewmodel-property2"

以下这种模式，可以将输入的元素的值绑定到视图模型的 salePrice 属性，如下所示：

<input type="text" data-bind="value:salePrice " />

挖空的内置绑定允许处理大多数绑定方案，但如果您遇到一个专门的绑定方案，不覆盖，也可以创建自定义绑定与挖空。 我将涵盖在以后的文章中的自定义绑定。

基本的绑定：文本和 html

让我们深入探讨挖空提供的内置绑定。 图 1 显示的视图模型所有的这篇文章中的示例将使用其内置的绑定。 示例数据是一把吉他，但它是只是为了演示绑定。

图 1 查看模型的物业，嵌套的儿童和方法

my.showroomViewModel = {
  id: ko.observable("123"),
  salePrice: ko.observable(1995),
  profit: ko.observable(-7250),
  rating: ko.observable(4),
  isInStock: ko.observable(true),
  model: {
          code: ko.observable("314ce"),
          name: ko.observable("Taylor 314 ce")
  },
  colors: ko.observableArray([
          { key: "BR", name: "brown" },
          { key: "BU", name: "blue" },
          { key: "BK", name: "black"}]),
  selectedColor: ko.observable(""),
  selectedColorsForDropdown: ko.observableArray([]),
  selectedColorForRadio: ko.observableArray(),
  allowEditing: ko.observable(true),
  isReadonly: ko.observable(true),
    onSalesFloor: ko.observable(true),
    qty: ko.observable(7),
  photoUrl: ko.observable("/images/314ce.png"),
  url: ko.observable("http://johnpapa.
net"),
  details: ko.observable("<strong><em>This guitar rocks!</em></strong>"),
  checkboxHasFocus: ko.observable(false),
  textboxHasFocus: ko.observable(false),
  buttonHasFocus: ko.observable(false),
  userInput: ko.observable(""),
  setFocusToCheckbox: function () {
          this.checkboxHasFocus(true);
  },
  displayValue: function () {
          if (this.userInput().length > 0) {
                  window.alert("You entered: " + this.userInput());
          }
  },
  detailsAreVisible: ko.observable(false),
  showDetails: function () {
          this.detailsAreVisible(true);
  },
  hideDetails: function () {
          this.detailsAreVisible(false);
  },
  useUniqueName: ko.observable(true)
};
ko.applyBindings(my.showroomViewModel);

也许最常见的绑定是文本绑定。 当挖空看到文本绑定时，它设置的起始属性的 Ie 浏览器或等效属性在其他浏览器中。 使用文本绑定时，将覆盖以前的所有文本。 文本绑定通常用于在大跨度或专区中显示的值 此示例将视图模型 model.code 属性绑定到某个范围：

<span data-bind="text: model.code"></span>

Html 绑定不用作经常，但它是非常方便的呈现在您的视图模型中的 HTML 内容。 在以下示例中，呈现的 html 属性内容，使文本加粗斜体：

<tr>
  <td><div class="caption">html</div></td>
  <td><div data-bind="html: details"></div></td>
  <td><span>details: </span><span data-bind="text: details"></span></td>
</tr>

您可以看到这些示例中的结果图 2 （和所有通过运行 bindings.html-04-内建页面中的代码示例的示例）。 所有示例都显示内置绑定、 目标和从视图模型的源值。

图 2 挖空文本和 HTML 绑定

值绑定

数据绑定是可以说是最有用的应用程序是交互式的所以它的内置的绑定，大部分在挖空的帮助绑定到输入和窗体的元素如文本框、 复选框和下拉列表。 让我们通过第一次展示挖空的值绑定的多功能探索这些内置的绑定。

绑定的 HTML 的许多工作的值输入到视图模型属性直接绑定到 HTML 输入元素如文本框复选框或单选按钮的值类型。 下面的示例显示视图模型 model.code 属性被绑定到一个文本框。 使用挖空的可观察到的功能，使它的源值发生更改时通知目标定义属性：

<td><input type="text" data-bind="value: model.code"/></td>
<td><span>model.code: </span><span data-bind="text: model.code"></span></td>

如果用户更改文本框中的值，新的值从目标 （文本框） 发送到源 （视图模型 model.code 属性） 时，用户在文本框的选项卡。 但是，也可以使用特殊的挖空绑定告诉挖空来更新，每次按键上的源的目标。 在下一个示例中，文本框的值绑定到视图模型 salePrice 属性和 valueUpdate 绑定绑定到 afterkeydown。 valueUpdate 是一个可帮助您定义时应更新值绑定的值绑定的参数。 该代码在这里告诉挖空后下新闻 （您可以尝试此示例的运行该代码示例 ； 每个键的更新的源代码 结果将显示在图 3）：

<td><input type="text" data-bind="value: salePrice, valueUpdate: 'afterkeydown'"/></td>
<td><span>salePrice: </span><span data-bind="text: salePrice"></span></td>

图 3 的值绑定到文本框

绑定复选框和单选按钮

复选框可以是数据绑定到挖空的检查绑定。 应将已检查的绑定绑定到属性或表达式计算结果为 true 或 false。 查看模型属性定义为可观测量，因为源属性的更改时，将会更新复选框。 同样，当用户检查或取消选中该复选框，在视图模型属性更新值。 下面的示例显示被绑定到 isInStock 属性的复选框 （在视图模型从图 1； 结果将显示在图 4）：

<td><input type="checkbox" data-bind="checked: isInStock"/></td>
<td><span>isInStock: </span><span data-bind="text: isInStock"></span></td>

图 4 已检查的绑定

您还可以使用已检查的绑定从一组单选按钮选择一个单选按钮。 下面的示例显示了一组单选按钮的值是所有硬编码，以双字母代码表示一种颜色 ； 当用户选择一种颜色的单选按钮，通过，选中的属性设置和查看模型 selectedColorForRadio 属性将更新，以两个字母的值：

<td>
  <input type="radio" value="BR" data-bind=
    "checked:  selectedColorForRadio" /><span>brown</span>
  <input type="radio" value="BU" data-bind=
    "checked: selectedColorForRadio" /><span>blue</span>
  <input type="radio" value="BK" data-bind=
    "checked: selectedColorForRadio" /><span>black</span>
</td>
<td><span>selectedColorForRadio: </span><span data-bind=
  "text: selectedColorForRadio"></span></td>

虽然这工作很正常，我觉得更有用的数据绑定到一系列的单选按钮，您可以通过合并三个内置绑定颜色列表：已检查的值和 foreach。 在视图模型图 1 的颜色属性，是一个数组，包含每个颜色的名称和密钥值的对象。 Foreach 绑定在下一个示例循环遍历颜色数组属性，设置每个单选按钮的值绑定到的颜色键属性与绑定到的颜色名称的属性的大跨度的文本：

<td>
  <div data-bind="foreach: colors">
    <input type="radio" data-bind=
      "value:key, checked: $parent.selectedColorForRadio" />
       <span data-bind="text: name"></span>
  </div>
</td>
<td><span>selectedColorForRadio: </span>
  <span data-bind="text: selectedColorForRadio"></span></td>

选中的单选按钮绑定到视图 $父函数模型 selectedColorForRadio 属性设置。 不过，绑定不能只是被直接绑定到该属性因为上下文更改视图模型的颜色属性 foreach 绑定。 要正确绑定到视图模型属性，代码需要回请参阅上下文的父 （在本例中视图模型本身）。 挖空 $父函数告诉挖空引用上下文分级结构中，哪些数据绑定已检查的绑定到视图模型 selectedColorForRadio 属性的一个级别。 （有很多有用的函数和像这样的提示，我将探讨在将来的文章。）此示例的结果将显示在图 5。

图 5 签和单选按钮中使用值绑定

绑定下拉列表

下拉列表具有几个重要属性加载项的列表和显示的值，使用不同的密钥值存储用户的选择。 挖空为每个提供了内置的绑定。

绑定的选项标识要显示，通常从视图模型对数组属性值的列表。 本节中的示例设置绑定到视图模型的颜色属性的选项。 有时，您要显示在下拉列表中的一个值，但使用另一个值，当用户从列表中选择一项。 挖空的内置选项文本和 optionsValue 绑定的帮助。 选项文本绑定到的属性的字符串名称设置要显示在下拉列表中，从绑定的选项。 OptionsValue 绑定到的属性的字符串名称设置要绑定到的选定的值的下拉列表中的项。 在此示例中，颜色数组包含具有一个名称和关键属性，其名称将用于选项文本和 optionsValue 键的对象。 值绑定设置为视图模型的 selectedColor 属性，用于存储用户的选择：

<td>
  <div class="caption">options, value, optionsText, optionsValue</div>
  <div>select (single selection dropdowns)</div>
</td>
<td><select data-bind="options: colors, value: selectedColor,
   optionsText: 'name', optionsValue: 'key'" ></select></td>
<td><span>selectedColor: </span><span data-bind="text: selectedColor"></span></td>

如果您想允许多项选择，从下拉列表中，您首先添加 HTML 选择元素的多个属性。 然后你挖空的 selectedOption （单数） 绑定替换其 selectedOptions （复数） 绑定：

<td>
  <div class="caption">options, selectedOptions, optionsText, optionsValue</div>
  <div>select (multiple selection dropdowns)</div>
</td>
<td><select data-bind="options: colors,selectedOptions: selectedColorsForDropdown,
  optionsText: 'name', optionsValue: 'key'" multiple="multiple" ></select></td>
<td><span>selectedColorsForDropDown: </span><span data-bind=
  "text: selectedColorsForDropdown"></span></td>

因为选择 HTML 元素允许多项选择，（这设置为 selectedOptions 内置绑定） 视图模型 selectedColorsForDropdown 属性将包含所选择的值的逗号分隔列表。

图 6 显示蓝色和黑色颜色选择的结果。 请注意下拉列表显示 （蓝色和黑色） 的颜色的名称，但使用密钥 （布和浅滩） 作为所选的值。

图 6 绑定到下拉列表

启用和禁用的输入元素

挖空提供了内置的绑定启用和禁用的输入的元素。 启用绑定将使输入的元素，如果它绑定到的属性值为 true，并将禁用该元素，如果其值为 false。 禁用绑定完全相反：

<td>
  <input type="checkbox" data-bind="checked: allowEditing"/>
  <input type="text" data-bind="enable: allowEditing, value:salePrice" />
</td>
<td><span>allowEditing: </span><span data-bind="text: allowEditing"></span></td>

此代码示例演示了复选框的值是数据绑定到视图模型 allowEditing 属性，也绑定到文本框启用绑定。 所以当了复选框、 文本框启用的 ； 时未被选中，文本框将被禁用。

与此相反下, 一个示例演示如何选中复选框绑定绑定到视图模型 isReadonly 属性和文本框禁用绑定设置为 isReadonly 属性。 因此选中该复选框后，文本框禁用 （可以看到这两个样本的结果，在图 7）：

<td>
  <input type="checkbox" data-bind="checked: isReadonly"/>
  <input type="text" data-bind="disable: isReadonly, value:salePrice" />
</td>
<td><span>is readonly: </span><span data-bind="text: isReadonly"></span></td>

启用和禁用元素的图 7 绑定

具有约束力的焦点

挖空有内置的绑定命名有焦点，以确定和集具有焦点的元素。 当您希望在窗体上的某个特定元素设置焦点时，有焦点绑定非常方便。 如果多个元素绑定的值的计算结果为 true 的有焦点，焦点将会到了设置大多数最近其有焦点的元素。 可以设置为 true 可直接到元素移动焦点关键字有焦点的绑定。 中的代码示例中所示，可以将它绑定到视图模型属性，或者图 8。

图 8 设置有焦点的绑定

<td>
  <input type="checkbox" data-bind="hasfocus: checkboxHasFocus"/>
  <input type="text" data-bind="hasfocus: textboxHasFocus"/>
  <button data-bind="click: setFocusToCheckbox, hasfocus:buttonHasFocus">
    set focus to checkbox</button>
  <br/>
  <span data-bind="visible: checkboxHasFocus">checkbox has focus</span>
  <span data-bind="visible: textboxHasFocus">textbox has focus</span>
  <span data-bind="visible: buttonHasFocus">button has focus</span>
</td>
<td>
  <span>checkboxHasFocus: </span><span data-bind="text: checkboxHasFocus">
    checkbox has focus</span>
  <br/>
  <span>textboxHasFocus: </span><span data-bind="text: textboxHasFocus">
    textbox has focus</span>
  <br/>
  <span>buttonHasFocus: </span><span data-bind="text: buttonHasFocus">
    button has focus</span>
</td>

此代码将三个不同的视图模型属性设置为一个复选框、 文本框和按钮元素相应地有焦点绑定。 当焦点设置为这些 HTML 元素之一时，相应的有焦点绑定就会将视图模型属性设置为 true，该元素 （以及其他人为 false） 中。 您可以尝试用可下载的代码，此示例或查看结果图 9，在用户已将焦点放在文本框中。

图 9 绑定的设置焦点

具有约束力的可见性

挖空的可见绑定应绑定到的属性，计算结果为 true 或 false。 此绑定会将该元素的显示样式设置为可见如果真 （true 或非空值） 或无，如果为 false （false，0，未定义或为 null）。

下一个示例显示选中复选框绑定和 textbox 可见绑定设置为视图模型 onSalesFloor 属性。 选中该复选框后，onSalesFloor 属性设置为 true 和文本框变为可见。 当复选框处于未选中状态，onSalesFloor 属性设置为 false，文本框不再可见 （请参见图 10）：

<td>
  <input type="checkbox" data-bind="checked: onSalesFloor"/>
  <input type="text" data-bind="visible: onSalesFloor, value:qty" />
</td>
<td>
  <span>onSalesFloor: </span><span data-bind="text: onSalesFloor"></span>
</td>

图 10 约束力的可见性

事件绑定

挖空通过其事件的内置绑定支持绑定到任何事件，但它也有两个特别内置的绑定单击并提交。 您要绑定的单击事件视图模型中的方法时，也应在元素上使用单击绑定。 它最常使用的按钮，输入或元素，但可以使用任何 HTML 元素。

下面的代码设置绑定到视图模式 ； displayValue 方法的按钮单击 在图 1，你可以看到视图模型的 displayValue 方法只显示视图模型 userInput 属性 （这绑定到文本框） 与警报：

<td>
  <input type="text" data-bind="value: userInput"/>
  <button data-bind="click: displayValue">display value</button>
</td>
<td>
  <span>userInput: </span><span data-bind="text: userInput"></span>
</td>

当您要将视图模型方法绑定到单击以外的其他事件时，您可以使用挖空的事件绑定。 单击绑定是最常用的事件绑定，因为它是事件绑定到的只是快捷方式。

挖空的事件绑定允许您将绑定到任何事件。 若要使用事件绑定，您传递对象文本包含名称值对的事件名称和视图模型方法，以逗号分隔。 下面的代码示例设置挖空的内置事件绑定，以便查看模型上的鼠标悬停和怪异事件绑定到的 showDetails 和 hideDetails 方法。 这些方法相应地为 true 或 false，设置视图模型可观察到的属性 detailsAreVisible：

<td>
  <div data-bind="text:model.code, event: {mouseover: showDetails,
    mouseout: hideDetails}"></div>
  <div data-bind="visible: detailsAreVisible" style="background-color: yellow">
    <div data-bind="text:model.
name"></div>
    <div data-bind="text:salePrice"></div>
  </div>
</td>
<td>
  <span>detailsAreVisible: </span><span data-bind="text: detailsAreVisible"></span>
</td>

第二个 div 设置可见绑定查看模型详细信息­AreVisible 属性，所以当用户将鼠标移到第一个 div 上时，第二个 div 变得可见。 当第一个 div 远离移动鼠标时，第二个 div 不再是可见的。 结果将显示在图 11。 提交绑定 （不显示的 Figure11) 接受任何输入将提交的 HTML 表单的手势。

图 11 点击和事件绑定

绑定样式

可以用挖空使用 css 和风格内置绑定绑定样式。 可以设置 css 绑定到一个或多个有效的 css 类的名称。 下面的示例显示文本框已绑定到视图模型利润属性与绑定到对象文本的集其 css 的设置其值。 对象文本包含一个或多个 css 类应用名称和应评估为 true 或 false 的相应表达式：

<td>
  <input data-bind="value:profit, css: {negative: profit() < 0,
    positive: !(profit() < 0), }"/>
</td>
<td>
  <span>profit < 0: </span><span data-bind="text: profit() < 0 ?
'negative' : 'positive'"></span>
</td>

例如，如果利润属性为小于 0 的值，将应用 css 类命名的负。 同样，第二个表达式，如果那是真的，将应用 css 类命名的阳性。

虽然建议使用 css 类，只要有可能，有时您可能要设置以及特定样式。 挖空，此支持具有其样式的内置绑定。 在以下示例中，文本框的颜色更改为红色如果利润小于 0，比和绿如果利润大于 0 （的 css 和风格的绑定结果将显示在图 12）：

<td>
  <input data-bind="value:profit, style: {color: profit() < 0 ? '
red' :
    'green'}"></input>
</td>
<td>
  <span>profit < 0: </span><span data-bind="text: profit() < 0 ? '
red' :
    'green'"></span>
</td>

图 12 样式绑定

绑定到其他 HTML 属性

虽然挖空有许多内置的绑定，您肯定会遇到某些情况下，都不存在的。 对于这些，挖空提供 attr 内置绑定，它允许您对数据的任何属性绑定到视图模型属性。 这是很有用，在很多常见的情况，例如绑定的 href 和标题元素：

<td>
  <a data-bind="attr: {href: url, title: model.
name}, text:model.code"></a>
</td>
<td><span>url: </span><span data-bind="text: url"></span></td>

Attr 绑定的另一个常见用途是使 img 元素将它的 src 属性绑定到视图模型 photoUrl 属性 （您可以看到两人在这些示例结果图 13）：

<td>
  <img data-bind="attr: {src: photoUrl, alt: model.code}" class="photoThumbnail"/>
</td>
<td><span>photoUrl: </span><span data-bind="text: photoUrl"></span></td>

图 13 绑定到元素属性

接近尾声了

这篇文章探讨了许多的敲除提供的内置绑定。 还有其他几个最显著的是模板绑定，其中在以后的文章中，我将涵盖。 在任何情况下，概念是相同的。 确定要使用的目标元素与您要绑定的视图模型成员的绑定属性。 一旦您掌握挖空的观测量和其各种内置绑定，您必须创建强大的 Web 应用程序使用模型视图 ViewModel 或 MVVM，模式的基本构造块。

John Papa 曾任 Microsoft Silverlight 和 Windows 8 团队推广专家，他主持的 Silverlight 电视秀节目深受观众欢迎。介绍了全球在要点和会议的会议，如生成、 组合、 专业开发人员大会、 Tech·教育署、 Visual Studio 生活 ！ 和 DevConnections。Papa 同时也是 Visual Studio 杂志的专栏作家 (Papa's Perspective) 以及 Pluralsight 培训视频作者。有关他的情况，请访问 Twitter 上的 twitter.com/john_papa。

多亏了以下的技术专家审查这篇文章：Steve Sanderson