通過添加一個類保持沒有窗體元素的狀態

嗨我有一個情況，我有一個隱藏的領域和ul與10個項目時，當用戶點擊一個李的輸入得到的更新和類被添加到當前li.Here是代碼：通過添加一個類保持沒有窗體元素的狀態

<ul> 
     <li data-bind="css: { active: $data.grade == 1 }"><a data-bind="click: $root.updateHiddenField">1</a></li> 
     <li data-bind="css: { active: $data.grade == 2 }"><a data-bind="click: $root.updateHiddenField">2</a></li> 
     <li data-bind="css: { active: $data.grade == 3 }"><a data-bind="click: $root.updateHiddenField">3</a></li> 
     <li data-bind="css: { active: $data.grade == 4 }"><a data-bind="click: $root.updateHiddenField">4</a></li> 
     <li data-bind="css: { active: $data.grade == 5 }"><a data-bind="click: $root.updateHiddenField">5</a></li> 
     <li data-bind="css: { active: $data.grade == 6 }"><a data-bind="click: $root.updateHiddenField">6</a></li> 
     <li data-bind="css: { active: $data.grade == 7 }"><a data-bind="click: $root.updateHiddenField">7</a></li> 
     <li data-bind="css: { active: $data.grade == 8 }"><a data-bind="click: $root.updateHiddenField">8</a></li> 
     <li data-bind="css: { active: $data.grade == 9 }"><a data-bind="click: $root.updateHiddenField">9</a></li> 
     <li data-bind="css: { active: $data.grade == 10 }"><a data-bind="click: $root.updateHiddenField">10</a></li> 
</ul> 
<input type="hidden" data-bind="value: $data.grade"/> 

    function updateHiddenField(model, event) { 
     var link = $(event.currentTarget); 
     link.parent().parent().find("li").removeClass("active"); 
     link.parent().addClass("active"); 
     var value = link.text(); 
     model.grade(value); 
    }

這是應用程序的外觀：

enter image description here

當按鈕中的一個用戶點擊隱藏字段的值更新，但我使用jQuery來添加類。

當我點擊左邊的按鈕並轉到不同的類別，然後回到這裏時出現問題。當我這樣做時，隱藏字段具有正確的值，但li不會保留活動類，他們看起來好像從來沒有被按下過。現實中，價值被保存在綁定的觀察值中，但用戶無法知道這一點。

如可以看出我已經tryed使用該語句添加一個條件類：

**css: { active: $data.grade == 1 }**

但它似乎並沒有工作。

包括類別的所有數據都是一個單一模型。

任何人都可以幫助我解決這個問題嗎？

來源

2013-08-06 aleczandru

你的CSS結合應該是這樣的：'數據綁定=「CSS： {active：$ data.grade（）=='1'}「'注意'（）'後級和''''大約1. – nemesv

謝謝這就是爲什麼要把它寫成anwer的原因，所以我可以接受 – aleczandru

因爲您的grade是ko.observable因此您需要通過grade()得到它的值。

所以，你需要改變你的css綁定：

data-bind="css: { active: $data.grade() == 1 }"

而且可以大大簡化你的updateHiddenField方法

function updateHiddenField(model, event) { 
    var link = $(event.currentTarget);  
    model.grade(link.text()); 
}

來源

2013-08-06 08:26:34 nemesv

通過添加一個類保持沒有窗體元素的狀態

回答

相關問題