KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定
textInput綁定目的
textInput綁定主要用于<input>或者<textarea>元素。他提供了DOM和viewmodel的雙向更新。不同于value綁定,textinput綁定是實(shí)時(shí)更新的。
例如:
源碼:
<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é)合也可以進(jìn)行雙向文本框和視圖模型性能的結(jié)合,但是博主更喜歡textInput,因?yàn)樗菍?shí)時(shí)更新的。value綁定與textInput綁定的主要的區(qū)別在于:
即時(shí)更新
value默認(rèn)情況下,只有當(dāng)用戶(hù)將焦點(diǎn)從文本框移開(kāi)后才會(huì)更新您的模型。textInput每次擊鍵或其他文本輸入時(shí)立刻更新模型。
瀏覽器的事件處理
不同的瀏覽器有著文本輸入機(jī)制,如剪切,拖動(dòng),或接受自動(dòng)完成建議的事件在不同的瀏覽器中機(jī)制是不一致。value綁定,有額外的選項(xiàng),如valueUpdate: afterkeydown獲得對(duì)特定事件的更新,但是有可能不兼容所有的瀏覽器。
textInput結(jié)合是專(zhuān)門(mén)用來(lái)處理各種瀏覽器的不同機(jī)制,即使在應(yīng)對(duì)不同的文字輸入機(jī)制也能保持一致和直接更新模型。
不要嘗試使用value和textInput在相同的元素上進(jìn)行綁定。
hasFocus綁定目的
hasFocus綁定是視圖模型屬性與DOM元素的焦點(diǎn)狀態(tài)綁定。它是一個(gè)雙向綁定,所以:
如果您的視圖模型屬性設(shè)置為true或者false,相關(guān)的元素將成為聚焦的或未聚焦。
如果用戶(hù)手動(dòng)對(duì)焦或unfocuses相關(guān)元件,所述視圖模型屬性將被設(shè)置為true或false相應(yīng)。
如果您正在構(gòu)建中,編輯元素動(dòng)態(tài)顯示復(fù)雜的形式,你想控制,用戶(hù)應(yīng)該開(kāi)始打字,或插入符的響應(yīng)位置,這是非常有用的。
示例1
這個(gè)例子中當(dāng)文本框當(dāng)前具有焦點(diǎn)時(shí)則顯示消息,并可以使用一個(gè)按鈕通過(guò)編程方式觸發(fā)焦點(diǎn)。
源碼:
<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
因?yàn)閔asFocus綁定是雙向綁定,這可以使切換的“編輯”模式更加便捷。
源碼:
<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'>) 并與視圖模型屬性進(jìn)行綁定。
當(dāng)用戶(hù)更改了表單控件,這將更新您的視圖模型屬性的值。同樣,當(dāng)您更新您的視圖模型的值,也將直接反映到表單控件上。
注意:對(duì)于文本框,下拉列表,以及所有以非可勾選表單控件,需要使用value綁定或者textInput綁定讀寫(xiě)元素的值,而不是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:?jiǎn)芜x按鈕
源碼:
<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ù)被解釋的方式取決于你綁定元素是什么類(lèi)型:
對(duì)于復(fù)選框,當(dāng)參數(shù)值true時(shí)KO將設(shè)置為元素為選中狀態(tài),當(dāng)它為false則為未選中狀態(tài)。如果你給定的不是一個(gè)布爾值,KO會(huì)松散地解釋。這意味著,非零數(shù)字和非null對(duì)象和非空字符串都將被解釋為true,而零,null,undefined,和空字符串將被解釋為false。
當(dāng)用戶(hù)選中或取消選中該復(fù)選框,將KO你的模型屬性設(shè)置為true或false。
如果你的參數(shù)解析為一個(gè)被給予array數(shù)組。在這種情況下,KO將設(shè)置檢查DOM中value屬性是否與數(shù)組值匹配,如果值匹配則被選中,如果不匹配則不勾選。
當(dāng)用戶(hù)選中或取消選中該復(fù)選框,將KO更改對(duì)應(yīng)視圖模型屬性的值。就像示例2一樣。
對(duì)于單選按鈕,KO將檢查視圖模型的值是否等于單選按鈕DOM節(jié)點(diǎn)的value屬性或檢查視圖模型屬性值是否等于checkedValue參數(shù)指定的值。就像示例3一樣。
當(dāng)選擇了用戶(hù)改變其單選按鈕,KO會(huì)設(shè)置模型屬性值為選定的單選按鈕的值。像示例3中,點(diǎn)擊value="cherry"的單選按鈕后將設(shè)置viewModel.spamFlavor為"cherry"。
如果你的參數(shù)是監(jiān)控屬性類(lèi)型,每當(dāng)值改變綁定將更新元素的選中狀態(tài)。如果該參數(shù)是非監(jiān)控屬性,它只會(huì)在首次運(yùn)行時(shí)設(shè)置元素的選中狀態(tài),以后再不會(huì)更新。
其他參數(shù)
checkedValue
checkedValue參數(shù)定義了使用值與checked綁定結(jié)合,而不是元素的value屬性。如果你想要的值是一個(gè)字符串(如整數(shù)或?qū)ο螅┮酝獾臇|西,或者你想動(dòng)態(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ù)是一個(gè)監(jiān)控屬性,當(dāng)值的變化和元素是否被選中,綁定將更新checked模型屬性。對(duì)于復(fù)選框,它會(huì)從數(shù)組刪除舊值并添加新的價(jià)值。對(duì)于單選按鈕,它只會(huì)更新模型值。
以上所述是小編給大家介紹的KnockoutJS 3.X API 第四章之表單textInput、hasFocus、checked綁定,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- knockoutjs模板實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)列表
- 使用asp.net mvc,boostrap及knockout.js開(kāi)發(fā)微信自定義菜單編輯工具(推薦)
- Asp.net MVC利用knockoutjs實(shí)現(xiàn)登陸并記錄用戶(hù)的內(nèi)外網(wǎng)IP及所在城市(推薦)
- KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流foreach綁定
- KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流with綁定
- KnockoutJS 3.X API 第四章之事件event綁定
- KnockoutJS 3.X API 第四章之表單value綁定
- BootstrapTable+KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查解決方案(三)兩個(gè)Viewmodel搞定增刪改查
- KnockoutJS數(shù)組比較算法實(shí)例詳解
相關(guān)文章
基于JS代碼實(shí)現(xiàn)簡(jiǎn)單易用的倒計(jì)時(shí) x 天 x 時(shí) x 分 x 秒效果
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)簡(jiǎn)單易用的倒計(jì)時(shí) x 天 x 時(shí) x 分 x 秒效果,需要的朋友可以參考下2017-07-07js統(tǒng)計(jì)錄入文本框中字符的個(gè)數(shù)并加以限制不超過(guò)多少
為了更直觀的體現(xiàn)用戶(hù)在文本框輸入文本時(shí)能看到自己輸入了多少字,并且有些特殊的要求字?jǐn)?shù)不超過(guò)多少,本文給出了具體的實(shí)現(xiàn)2014-05-05ZeroClipboard插件實(shí)現(xiàn)多瀏覽器復(fù)制功能(支持firefox、chrome、ie6)
Zero Clipboard 利用透明的Flash讓其漂浮在復(fù)制按鈕之上,這樣其實(shí)點(diǎn)擊的不是按鈕而是Flash ,這樣將需要的內(nèi)容傳入Flash,再通過(guò)Flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到剪貼板2014-08-08js實(shí)現(xiàn)拖動(dòng)模態(tài)框效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖動(dòng)模態(tài)框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Javascript實(shí)現(xiàn)運(yùn)算符重載詳解
本文給大家匯總介紹了Javascript實(shí)現(xiàn)運(yùn)算符重載的方法,實(shí)現(xiàn)的思路很簡(jiǎn)單,有需要的小伙伴可以來(lái)看看2018-04-04跟我學(xué)習(xí)javascript的函數(shù)調(diào)用和構(gòu)造函數(shù)調(diào)用
跟我學(xué)習(xí)javascript的函數(shù)和構(gòu)造函數(shù)調(diào)用,主要包括三方面內(nèi)容函數(shù)調(diào)用、方法調(diào)用以及構(gòu)造函數(shù)調(diào)用,想要了解這些內(nèi)容的朋友千萬(wàn)不要錯(cuò)過(guò)下面的內(nèi)容。2015-11-11