用戶端洞悉

  • 發行項

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 是前的宣傳員，微軟 Silverlight 和 Windows 8 的隊，他主持了受歡迎的 Silverlight 電視節目。介紹了全球在要點和會議的會議，如生成、 組合、 專業開發人員大會、 Tech·教育署、 Visual Studio 生活 ！ 和 DevConnections。爸爸也是 Visual Studio 雜誌 (爸爸的角度） 和培訓視頻 Pluralsight 與作者的專欄作家。跟隨他在 Twitter 上 twitter.com/john_papa。

多虧了以下的技術專家審查這篇文章：Steve Sanderson