淘汰賽初學者指南：第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中文網其他相關文章！