Question

我有一个动态生成的无序列表＆lt;李＆GT;由淘汰视图模型布置的元素，我只想制作其中一个＆lt;李＆GT;视图加载时，元素具有类或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＆＃34; style＆＃34;和＆＃34; css＆＃34;绑定，但是我无法直接向无序列表的HTML添加属性，因为当从视图模型加载页面时，我使用foreach生成li元素...

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类的绑定。当然，您需要有一种方法来确定要突出显示哪一个。

我在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" : "";
  }

希望这有帮助。

Knockout - 使用<li>元素将类赋予foreach <ul>中的一个<li>元素

2 个答案: