如何为淘汰赛js中的每个foreach循环添加不同的css类到html

Question

KnockoutJS 数据

function ExampleViewModel() {
    var self = this;
    self.ExampleData = ko.observableArray([]);
    self.update = function() {
        $.ajax("test.json", {
            success: function(allData) {
                var mappeddata = $.map(allData, function(item) {
                    return new DataItem(item)
                });
                self.ExampleData(mappeddata);
            }
        });
    }
}

function DataItem(data) {
    this.Name = ko.observable(data.name);
}
var exampleViewModel = new ExampleViewModel();
ko.applyBindings(exampleViewModel);

HTML 数据

    <div data-bind="foreach: ExampleData">
      <div class="has-topic-background-color">
      </div>
    </div>

如何在每个 foreach 循环中更改以下 div 的类 div class="has-topic-background-color

我需要如果在第一个循环中它显示红色然后在第二个循环中我需要蓝色插入红色

Answer 1

你可以使用css绑定

http://knockoutjs.com/documentation/css-binding.html

function ViewModel() {
  var self = this;
  self.data = ko.observableArray([1, 2, 3, 4, 5, 6, 7, 8, 9]);
  self.className = function(index) {
    return index % 2 === 0? 'redClass' : 'blueClass';
  };
  self.textValue = function(index) {
    return 'Data  for index ' + index + ' has background ' + self.className(index);
  }
}   

$(document).ready(function () {
  var myViewModel = new ViewModel();
  ko.applyBindings(myViewModel);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>
  You can inspect the element to see the class name
</div>
<br/>

<div data-bind="foreach: data">
  <div data-bind="text: $parent.textValue($index()), css: $parent.className($index())"></div>
</div>