3

在引导程序中，指示项目被选中的标准方法是通过 .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将所选对象设置为 observable personSelected。我想我可以使用表单的另一个数据绑定css: {active: $root.chosenPerson.name == $data.name}来检查当前项目是否被选中，但这似乎不起作用。见jsFiddle

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

谢谢！

4

2 回答 2

4

您在css绑定并将其与可观察对象相结合时处于正确的轨道上。

但首先你需要修复你的personSelected函数以正确设置你的chosenPersonobservable（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。

于 2013-10-14T14:34:11.763 回答
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}">
于 2013-10-14T14:34:16.033 回答