Knockout.js＆Bootstrap 3 - 選擇列表組.active在選擇

在引導程序中，指示選定項目的標準方式是通過.active類。我有一個通過foreach knockout.js結構創建的列表組。Knockout.js＆Bootstrap 3 - 選擇列表組.active在選擇

<div class="list-group" data-bind="foreach: people"> 
    <a href="#" class="list-group-item" data-bind="click: $root.personSelected, css: {active: $root.chosenPerson.name == $data.name}"> 
      <h4 class="list-group-item-heading" data-bind="text: name"></h4> 
    </a> 
<div>

當選擇了一個人，我要personSelected調用設置選定對象觀察到personSelected。我想我可以使用另一種形式css: {active: $root.chosenPerson.name == $data.name}的數據綁定來檢查當前項目是否被選中，但這似乎不起作用。請參閱jsFiddle

我認爲我可能沒有使用正確的比較語句，或者有更好的方法來做到這一點。有什麼想法嗎？

謝謝！

來源

2013-10-14 Diode Dan

您正在與css綁定並將其與觀察值組合在一起。

但首先你需要修復您的personSelected功能正確設置你的chosenPerson觀察到的（可觀察到的是，你需要調用它們與新的值作爲參數的函數）：

self.personSelected = function(person){ 
    self.chosenPerson(person); 
}

然後，我會創建一個新的輔助功能（可以鏟這一切的邏輯爲綁定表達式，但這不是一個好的做法）的基礎上，name返回此人是否是所選擇的：

self.isSelected = function(name) { 
    var selectedperson = self.chosenPerson() 
    if(selectedperson) //handle if no person is selected 
    { 
     return selectedperson.name == name; 
    } 
}

釷您只需要在綁定中使用此功能：

<a href="#" class="list-group-item" 
      data-bind="click: $root.personSelected, 
         css: { active: $parent.isSelected(name) }">

演示JSFiddle。

來源

2013-10-14 14:34:11 nemesv

感謝您的快速反應！ +1爲JSFiddle和最佳實踐。您的解決方案很好。在你的助手功能中，你使用名稱作爲比較項目。使用對象本身會更好嗎？返回selectedperson = person –

這取決於你的需求......但是你可以用'$ parent.isSelected（$ data）傳遞整個對象'http://jsfiddle.net/DQUwD/1/ – nemesv

問題是你沒有設置可觀察的選定人的價值，你將選定的人設置爲等於新的東西。另外，當你的視圖模型被實例化時，你沒有選定的人員的價值，但尚未定義來測試。

http://jsfiddle.net/x52VL/1/

當您設置chosenPerson做到這一點 -

self.chosenPerson(person);

和測試反對這樣的 -

 <a href="#" class="list-group-item" data-bind="click: $parent.personSelected, css: {active: $parent.chosenPerson().name == name}">

來源

2013-10-14 14:34:16

好評我的解決方案無法正常工作的技術原因。 nemesv的解決方案可能是一個更好的實踐解決方案 –

Knockout.js＆Bootstrap 3 - 選擇列表組.active在選擇

回答

相關問題