Question

在bootstrap中，指示选择项目的标准方法是通过.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 observable（可观察的是用新值作为参数调用它们的函数）：

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}">

Knockout.js＆amp; Bootstrap 3 - 列出组。活动选择

2 个答案: