knockout頁面繫結下拉列表select選中項錯誤問題
問題描述:
(不方便使用原始碼及原頁面,現簡要描述一下現象)
實體User包含屬性type,type值{“aa”,“bb”,"cc"}。一list頁面用於顯示多行User資料,點選每行的編輯按鈕,則載入info頁面顯示該User的具體資訊,其中type屬性在頁面中以下拉列表顯示(下拉列表僅顯示aa/bb/cc,無空選項)。現兩條User資料 X和Y,X的type值為“bb”,Y的type值為“aa”。
奇葩問題出現了,編輯資料X載入info頁面,下拉顯示正常,選中了“bb”;取消後再編輯Y載入info頁面後下拉列表竟選中了“bb”,沒有選中該顯示的“aa”,除錯js程式碼發現載入info頁面過程中下拉列表中途顯示了“aa”,但載入完畢後卻莫名其妙的又變成了上次info頁面的“bb”值,而此時js中Y的type值還是“aa”,即值正確但頁面顯示錯誤。
程式碼大概如下,
下拉列表的程式碼
<select data-bind="options: typeOptions, optionsText:'text',optionsValue:'value', value:entity().type, event: { change: typeChange}" >
.js中定義
typeOptions: ko.observableArray([])
info頁面的初始化init方法中給typeOptions賦值“aa”,“bb”,"cc",
然後載入User值viewModel.typeOptions([]); viewModel.typeOptions().push(new optionValues(translate('user:type.aa'),"aa")); ……//bb,cc viewModel.typeOptions(viewModel.typeOptions());
viewModel.entity(data);
問題解決:
出現這種情況基本確定是因為上次頁面歷史資料導致的,所以重中之重就是每次載入info頁面的時候都要先清空變數值。但不同場景裡即使清空的程式碼一樣結果也未必一樣,以前在其他類似情況下,我曾經在info頁面的init初始化方法中先清空typeOptions和entity(儲存了User物件)值就可以,但現在這種方法卻不在有效。(畢竟頁面看起來大同小異,但實際程式碼邏輯上總有一些差異,可能業務邏輯等等問題導致的吧……有點心累啊,一個小問題竟調了好久)。
最終的有效解決辦法為,
因為下拉列表的值一直是固定的,所以在定義變數的時候就把選項都賦值給它,(取代在init方法中push)
typeOptions: ko.observableArray([
new optionValues(translate('user:type.aa'),"aa"),
…… //bb,cc
]),
然後在init方法中清空entity值
viewModel.entity({});
然後就好了,好了……我表示很無語……
另外還有個問題就是info頁面有個按鈕會根據type值顯示或不顯示,
<button id="btn" data-bind="click: config, visible: showBtn" >按鈕</button>
在下拉列表的change事件中根據下拉選中值給showBtn賦值。下拉值切換的時候按鈕顯示正常,當載入info頁面的時候按鈕就比較隨心所欲了,這還是值清空的問題,所以在init方法中多加一句判斷type值並給showBtn賦值就好了。
雖然知道值清空可以解決,但具體為啥不清空的話即使我賦了新值繫結卻沒顯示正常,我卻不得解了……
相關推薦
knockout頁面繫結下拉列表select選中項錯誤問題
問題描述: (不方便使用原始碼及原頁面,現簡要描述一下現象) 實體User包含屬性type,type值{“aa”,“bb”,"cc"}。一list頁面用於顯示多行User資料,點選每行的編輯按鈕,則載入info頁面顯示該User的具體資訊,其中type屬性在頁面中以下拉列表
相於Repeater中使用繫結下拉列表一事 .
關於其它控制元件繫結這一塊網上有很多,但發現repeater這一塊很少,結合網上知識總結如下: 1,在repeater上抓取控制元件及進行資料繫結; 一般是在資料繫結後,或著是在ItemDataBound事件中來處理,下面介紹兩種方法:
asp.net MVC幾種繫結下拉列表的寫法
今天寫寫在asp.net MVC中幾種繫結下拉列表的寫法。 1.在前端寫死資料: @Html.DropDownListFor(m=>m.Sex,new SelectList(new List&l
(轉)基於MVC4+EasyUI的Web開發框架經驗總結(6)--在頁面中應用下拉列表的處理
ica new web開發 don ext images 如果 bob 獲取 http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我們都可以看到很多下拉列表的元素,有些是固定的,有些是動態的;有些是字典內容,
純css修改下拉列表select的默認樣式
png add OS 覆蓋 lec pad repeat 自定義 -c select的一些默認樣式我們很難修改,比如圖標的替換。接下來就說說如何修改這些默認樣式: html代碼: <div> <select name="">
用純css改變下拉列表select框的默認樣式
隱藏 如何 pos share ack rop href static image 在這篇文章裏,我將介紹如何不依賴JavaScript用純css來改變下拉列表框的樣式。 事情是這樣的,您的設計師團隊向您發送一個新的PSD(Photoshop文檔),它是一個新的網站的最終設
jsp獲取下拉列表select選擇的值
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
自定義下拉列表select樣式
jq: $(".select-head").each(function(){ $(this).click(function(event) {//自定義下拉列表框顯示和隱藏console.log(0);$(this).siblings("ul.option").toggleC
基於MVC4+EasyUI的Web開發框架經驗總結(6)--在頁面中應用下拉列表的處理
在很多Web介面中,我們都可以看到很多下拉列表的元素,有些是固定的,有些是動態的;有些是字典內容,有些是其他表裡面的名稱欄位;有時候引用的是外來鍵ID,有時候引用的是名稱文字內容;正確快速使用下拉列表的處理,可以提高我們程式介面的美觀性和友好型,本文主要介紹在我的Web開發框架以及相關的擴充套件Web應用中用
jsp頁面中的下拉列表
在WEB開發過程中,我們經常遇到資訊修改的功能需求。這時我們給使用者提供一個JSP頁面,展示出當前的資訊並允許使用者重新設定新值。而在這個頁面中,一般是少不了下拉列表的。至於它的處理方式,我以前想過一種,思路如下:在頁面設定一個隱藏域,用於儲存後臺傳遞過來的值;然後在頁面輸出下拉列表,這時它的值是預設的
layui獲取下拉列表select的值
HTML: <select class="form-control input-sm" name="category" lay-filter="category" aria-invalid="false">
用純css改變下拉列表select框的預設樣式
在使用html的select標籤的時候,可能我們會覺得原有的樣式比較醜,想把它變的美觀一點,那麼這裡有兩種方法。 1.方法一: <span style="font-family:KaiTi_GB2312;font-size:14px;">sele
Android Studio 繫結下拉框資料(網路JSON資料)
效果顯示: 1、頁面xml程式碼(專案的程式碼,直接複製會有錯,自己修改一下就好) <TextView android:id="@+id/consultation_tv_section" android:layout_wid
devExpress:gridview 中繫結下拉框 (示例)
1,gridview的某一列的 columnEdit 設為 repositoryItemLookUpEdit 2, 在 form_load中 寫如下程式碼 先給 gridcontrol賦 datasource:A (A中的某一列對應的值為0 或1,但顯示出來卻要求是
+++用純css改變下拉列表select框的預設樣式+++
http://ourjs.com/detail/551b9b0529c8d81960000007 在這篇文章裡,我將介紹如何不依賴JavaScript用純css來改變下拉列表框的樣式。 問題的提出 事情是這樣的,您的設計師團隊向您傳送一個新的PSD(Photos
給下拉列表select中的資料分類
可以通過給option標籤包裹一層optgroup標籤來給下拉列表中的資料分類格式:<select> <optgroup label="廣州"> <option>列表資料</option> </optgr
MVC4 繫結下拉框,編輯時繫結值
後臺: public ActionResult Modify(int id) { //3.1.1 檢查id //3.1.2根據id查詢資料 Models.Student stu = (from s
WPF 按鈕IsEnabled繫結到指定列表是否選中元素方法
<Button Content="刪除" Width="90" Name="btnDel" Margin="10, 5, 5, 5" Command="{Binding CmdDelPic}" IsEnabled="{Binding ElementName=lbImgs, Path=S
Html頁面中select下拉列表框別樣用法,一個方法一勞永逸。
select 異步加載很多時候,我們寫from表單面,給select標簽賦值,都采用這種方式:1.MVC中設創建公共的分部視圖;2.直接在前臺面中,插入片段後臺代碼;今天我利用HTML5中的自定義屬性,結合JQ擴展方法,寫一個通用的JS方法,JS代碼如下: $.fn.SetSelect = funct
C#下拉列表繫結前10年月和後10年年月資料
.aspx <asp:DropDownList runat="server" ID="ddlYear"></asp:DropDownList> <asp:DropDownList runat="server" ID="ddlMonth">