淘汰赛 - 给一个带有 <li> 元素的 foreach <ul> 中的一个 <li> 元素提供类答案

【问题标题】：Knockout - Give class to one <li> element in a foreach <ul> with <li> elements淘汰赛 - 给一个带有 <li> 元素的 foreach <ul> 中的一个 <li> 元素提供类
【发布时间】：2016-08-03 06:03:36
【问题描述】：

我有一个由淘汰视图模型布局的动态生成的元素的无序列表，我想在视图加载时让其中一个元素具有类或 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 与动态创建的元素进行交互（比如这里的Event binding on dynamically created elements?），但我几乎可以肯定有一种快速而干净的方法可以使用 Knockout 来实现。我已经查看了 Knockout 的“样式”和“css”绑定，但我无法直接将属性添加到无序列表的 HTML，因为当从视图模型加载页面时，我正在使用 foreach 生成 li 元素...

【问题讨论】：

你有条件分配班级还是只想分配给第二个li？

标签： javascript css knockout.js

【解决方案1】：

您需要做的就是在您的元素中绑定 css。如果您的对象中的活动属性为真，则它会获得活动类
HTML：

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

示例：http://jsfiddle.net/GSvnh/5133/

【讨论】：

【解决方案2】：

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

我在this Fiddle 中添加了一个名为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" : "";
  }

希望这会有所帮助。

【讨论】：