敲除具有許多內置綁定,但您肯定會遇到某些情況,而這些情況都不存在。對於這些,敲除提供了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>
創建下拉列表
下拉列表具有幾個重要屬性,可以加載項目列表,顯示值,使用其他鍵值並存儲用戶的選擇。淘汰賽為每一種都提供了內置的綁定。選項綁定設置將出現在下拉列表元素中的選項。值應該是一個數組。除
綁定的選項標識要顯示的值列表,通常是從視圖模型上的數組屬性。 。
當前選擇了多選列表中哪些元素的選定綁定控件。當用戶在多選列表中選擇或刪除選擇項目時,這會添加或刪除視圖模型上的數組的相應值。 >
<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設計模式使管理複雜的數據驅動接口變得更加容易,並且其可觀察到的物體和綁定係統有助於保持代碼的組織和可維護,即使對於大型應用程序也是如此。