淘汰赛-上一节课 <li> foreach中的元素 <ul> 同 <li> 元素

Question

我有一个由剔除视图模型布置的动态生成的<li>元素的无序列表，并且我希望在视图加载时仅使这些<li>元素之一具有类或CSS属性。 我想避免使用jQuery，并尽可能将其保留下来。

viewModel.headers = [
            { title: 'Item 1', sortKey: 'item1', asc: true, active: false },
            { title: 'Item 2', sortKey: 'item2', asc: false, active: true },
            { title: 'Item 3', sortKey: 'item3', asc: true, active: false},
            { title: 'Item 4', sortKey: 'item4', asc: true, active: false }
        ];

这是HTML：

    <ul data-bind="foreach: headers">
        <li data-bind="text: title"></li>
    </ul>

我尝试使用伪CSS选择器nth-child（2）选择该列表中的第二个li项目并应用样式，但是当浏览器考虑CSS时，当然不存在无序列表。 与jQuery类似的问题，尽管我仍然可以使用jQuery / Js与动态创建的元素进行交互（例如，这里是动态创建的元素上的事件绑定吗？ ），但是我几乎可以肯定，有一种使用Knockout的快捷，干净的方法。 我已经研究了Knockout的“样式”和“ css”绑定，但是由于从视图模型加载页面时，我正在使用foreach来生成li元素，因此无法直接向无序列表的HTML添加属性。 ...

Answer 1

您需要做的就是将CSS绑定到元素中。 如果对象中的活动属性为true，则将获得活动类
HTML：

 <ul data-bind="foreach: headers">
        <li data-bind="text: title,css:{'active':active}"></li>
  </ul>

范例： http ： //jsfiddle.net/GSvnh/5133/

Answer 2

您可以使用绑定来使用Knockout设置CSS类。 当然，您需要一种确定突出显示哪个方法的方法。

我在这个小提琴中添加了一个可观察到的称为selected

然后，我添加了一个css绑定：

<ul data-bind="foreach: headers">
  <li data-bind="text: title, css: $root.GetClass(title)"></li>
</ul>

因此，一个功能：

  self.GetClass = function(title) {
    return self.selected() == title ? "selected" : "";
  }

希望这可以帮助。