KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定
textInput綁定目的
textInput綁定主要用于<input>或者<textarea>元素。他提供了DOM和viewmodel的雙向更新。不同于value綁定,textinput綁定是實時更新的。
例如:
源碼:
<p>Login name: <input data-bind="textInput: userName" /></p> <p>Password: <input type="password" data-bind="textInput: userPassword" /></p>
ViewModel:
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre> <script> ko.applyBindings({ userName: ko.observable(""), // Initially blank userPassword: ko.observable("abc") // Prepopulate }); </script>
備注1:textInput綁定 VS value綁定
雖然value結(jié)合也可以進行雙向文本框和視圖模型性能的結(jié)合,但是博主更喜歡textInput,因為他是實時更新的。value綁定與textInput綁定的主要的區(qū)別在于:
即時更新
value默認情況下,只有當用戶將焦點從文本框移開后才會更新您的模型。textInput每次擊鍵或其他文本輸入時立刻更新模型。
瀏覽器的事件處理
不同的瀏覽器有著文本輸入機制,如剪切,拖動,或接受自動完成建議的事件在不同的瀏覽器中機制是不一致。value綁定,有額外的選項,如valueUpdate: afterkeydown獲得對特定事件的更新,但是有可能不兼容所有的瀏覽器。
textInput結(jié)合是專門用來處理各種瀏覽器的不同機制,即使在應(yīng)對不同的文字輸入機制也能保持一致和直接更新模型。
不要嘗試使用value和textInput在相同的元素上進行綁定。
hasFocus綁定目的
hasFocus綁定是視圖模型屬性與DOM元素的焦點狀態(tài)綁定。它是一個雙向綁定,所以:
如果您的視圖模型屬性設(shè)置為true或者false,相關(guān)的元素將成為聚焦的或未聚焦。
如果用戶手動對焦或unfocuses相關(guān)元件,所述視圖模型屬性將被設(shè)置為true或false相應(yīng)。
如果您正在構(gòu)建中,編輯元素動態(tài)顯示復(fù)雜的形式,你想控制,用戶應(yīng)該開始打字,或插入符的響應(yīng)位置,這是非常有用的。
示例1
這個例子中當文本框當前具有焦點時則顯示消息,并可以使用一個按鈕通過編程方式觸發(fā)焦點。
源碼:
<input data-bind="hasFocus: isSelected"> <button data-bind="click: setIsSelected">Focus programmatically</button> <span data-bind="visible: isSelected">The textbox has focus</span> <script> var viewModel = { isSelected: ko.observable(false), setIsSelected: function() { this.isSelected(true) } }; ko.applyBindings(viewModel,document.getElementById("eq2")); </script>
示例2
因為hasFocus綁定是雙向綁定,這可以使切換的“編輯”模式更加便捷。
源碼:
<p> Name: <b data-bind="visible: !editing(), text: name, click: edit"> </b> <input data-bind="visible: editing, value: name, hasFocus: editing" /> </p> <p><em>Click the name to edit it; click elsewhere to apply changes.</em></p> <script> function PersonViewModel(name) { // Data this.name = ko.observable(name); this.editing = ko.observable(false); // Behaviors this.edit = function() { this.editing(true) } } ko.applyBindings(new PersonViewModel("Bert Bertington"),document.getElementById("eq3")); </script>
checked綁定目的
checked綁定主要用于復(fù)選框(<input type='checkbox'>)或單選按鈕(<input type='radio'>) 并與視圖模型屬性進行綁定。
當用戶更改了表單控件,這將更新您的視圖模型屬性的值。同樣,當您更新您的視圖模型的值,也將直接反映到表單控件上。
注意:對于文本框,下拉列表,以及所有以非可勾選表單控件,需要使用value綁定或者textInput綁定讀寫元素的值,而不是checked綁定。
示例1:復(fù)選框綁定
源碼:
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> <script type="text/javascript"> var viewModel = { wantsSpam: ko.observable(true) // Initially checked }; // ... then later ... viewModel.wantsSpam(false); // The checkbox becomes unchecked </script>
示例2:多復(fù)選框附帶數(shù)組綁定
源碼:
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> <div data-bind="visible: wantsSpam"> Preferred flavors of spam: <div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div> <div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div> <div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div> </div> <script type="text/javascript"> var viewModel = { wantsSpam: ko.observable(true), spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond checkboxes }; // ... then later ... viewModel.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate checkbox </script>
示例3:單選按鈕
源碼:
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> <div data-bind="visible: wantsSpam"> Preferred flavor of spam: <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div> <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div> <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div> </div> <script type="text/javascript"> var viewModel = { wantsSpam: ko.observable(true), spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button }; // ... then later ... viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked </script>
參數(shù)
主要技術(shù)參數(shù)
KO設(shè)置元素的選中狀態(tài),以配合您的參數(shù)值。任何以前選中的狀態(tài)將被覆蓋。您的參數(shù)被解釋的方式取決于你綁定元素是什么類型:
對于復(fù)選框,當參數(shù)值true時KO將設(shè)置為元素為選中狀態(tài),當它為false則為未選中狀態(tài)。如果你給定的不是一個布爾值,KO會松散地解釋。這意味著,非零數(shù)字和非null對象和非空字符串都將被解釋為true,而零,null,undefined,和空字符串將被解釋為false。
當用戶選中或取消選中該復(fù)選框,將KO你的模型屬性設(shè)置為true或false。
如果你的參數(shù)解析為一個被給予array數(shù)組。在這種情況下,KO將設(shè)置檢查DOM中value屬性是否與數(shù)組值匹配,如果值匹配則被選中,如果不匹配則不勾選。
當用戶選中或取消選中該復(fù)選框,將KO更改對應(yīng)視圖模型屬性的值。就像示例2一樣。
對于單選按鈕,KO將檢查視圖模型的值是否等于單選按鈕DOM節(jié)點的value屬性或檢查視圖模型屬性值是否等于checkedValue參數(shù)指定的值。就像示例3一樣。
當選擇了用戶改變其單選按鈕,KO會設(shè)置模型屬性值為選定的單選按鈕的值。像示例3中,點擊value="cherry"的單選按鈕后將設(shè)置viewModel.spamFlavor為"cherry"。
如果你的參數(shù)是監(jiān)控屬性類型,每當值改變綁定將更新元素的選中狀態(tài)。如果該參數(shù)是非監(jiān)控屬性,它只會在首次運行時設(shè)置元素的選中狀態(tài),以后再不會更新。
其他參數(shù)
checkedValue
checkedValue參數(shù)定義了使用值與checked綁定結(jié)合,而不是元素的value屬性。如果你想要的值是一個字符串(如整數(shù)或?qū)ο螅┮酝獾臇|西,或者你想動態(tài)設(shè)置的值,這非常有用。
例如下邊的例子:
源碼:
<!-- ko foreach: items --> <input type="checkbox" data-bind="checkedValue: $data, checked: $root.chosenItems" /> <span data-bind="text: itemName"></span> <!-- /ko --> <script type="text/javascript"> var viewModel = { items: ko.observableArray([ { itemName: 'Choice 1' }, { itemName: 'Choice 2' } ]), chosenItems: ko.observableArray() }; </script>
如果你的checkedValue參數(shù)是一個監(jiān)控屬性,當值的變化和元素是否被選中,綁定將更新checked模型屬性。對于復(fù)選框,它會從數(shù)組刪除舊值并添加新的價值。對于單選按鈕,它只會更新模型值。
以上所述是小編給大家介紹的KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- knockoutjs模板實現(xiàn)樹形結(jié)構(gòu)列表
- 使用asp.net mvc,boostrap及knockout.js開發(fā)微信自定義菜單編輯工具(推薦)
- Asp.net MVC利用knockoutjs實現(xiàn)登陸并記錄用戶的內(nèi)外網(wǎng)IP及所在城市(推薦)
- KnockoutJS 3.X API 第四章之數(shù)據(jù)控制流foreach綁定
- KnockoutJS 3.X API 第四章之數(shù)據(jù)控制流with綁定
- KnockoutJS 3.X API 第四章之事件event綁定
- KnockoutJS 3.X API 第四章之表單value綁定
- BootstrapTable+KnockoutJS相結(jié)合實現(xiàn)增刪改查解決方案(三)兩個Viewmodel搞定增刪改查
- KnockoutJS數(shù)組比較算法實例詳解
相關(guān)文章
基于JS代碼實現(xiàn)簡單易用的倒計時 x 天 x 時 x 分 x 秒效果
這篇文章主要介紹了基于JS代碼實現(xiàn)簡單易用的倒計時 x 天 x 時 x 分 x 秒效果,需要的朋友可以參考下2017-07-07js統(tǒng)計錄入文本框中字符的個數(shù)并加以限制不超過多少
為了更直觀的體現(xiàn)用戶在文本框輸入文本時能看到自己輸入了多少字,并且有些特殊的要求字數(shù)不超過多少,本文給出了具體的實現(xiàn)2014-05-05ZeroClipboard插件實現(xiàn)多瀏覽器復(fù)制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash讓其漂浮在復(fù)制按鈕之上,這樣其實點擊的不是按鈕而是Flash ,這樣將需要的內(nèi)容傳入Flash,再通過Flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到剪貼板2014-08-08跟我學(xué)習javascript的函數(shù)調(diào)用和構(gòu)造函數(shù)調(diào)用
跟我學(xué)習javascript的函數(shù)和構(gòu)造函數(shù)調(diào)用,主要包括三方面內(nèi)容函數(shù)調(diào)用、方法調(diào)用以及構(gòu)造函數(shù)調(diào)用,想要了解這些內(nèi)容的朋友千萬不要錯過下面的內(nèi)容。2015-11-11