Knockout.js & Bootstrap 3 - List Group .active on selection

Question

在引导程序中，指示项目被选中的标准方法是通过 .active 类。我有一个通过foreach knockout.js 结构创建的列表组。

<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

我认为我可能没有使用正确的比较语句，或者也许有更好的方法来做到这一点。有什么想法吗？

谢谢！

Answer 1

使用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.

Answer 2

问题是您没有将所选人员的值设置为可观察，而是将所选人员设置为等于新事物。此外，当您的视图模型被实例化时，您还没有定义选择人员的值来进行测试。

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

当您设置 selectedPerson 时执行此操作 -

    self.chosenPerson(person);

并像这样对其进行测试 -

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