淘汰js循环通过元素增加数据属性值

Question

<ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="4"></li> 
    </ol> 

我想通过使用淘汰赛js减少此代码的冗余。这是我尝试过的，我对Knockout js非常陌生。下面的代码不起作用，我认为静态定义类名是创建一个问题，我想使用ko.computed函数，以摆脱定义元素。任何帮助或代码示例表示赞赏。

 <ol class="carousel-indicators" data-bind="foreach: items"> 
      <li data-target="#carousel-example-generic" data-bind='attr: { "data-slide-to": slide, class: className }'></li> 
     </ol> 
     function AppViewModel() 
     { 
      this.items= [ 
      { slide: ko.observable(0), className: ko.observable("active") }, 
      { slide: ko.observable(1), className: ko.observable("inactive") }, 
      { slide: ko.observable(2), className: ko.observable("inactive") }, 
      { slide: ko.observable(3), className: ko.observable("inactive") }, 
      { slide: ko.observable(4), className: ko.observable("inactive") } 

      ]; 
     }; 
     ko.applyBindings(new AppViewModel()); 

Answer 1

我假设还有一个'项目'不只是幻灯片索引和它是否活动。为了这个例子的目的，我假设他们有一个属性'id'。

<ol class="carousel-indicators" data-bind="foreach: items"> 
    <li data-target="#carousel-example-generic" data-bind="click: $parent.setActiveItem, attr: { 'data-slide-to': $index() }, css: { 'active': id === $parent.activeItemId() }"></li> 
</ol> 

function AppViewModel() 
{ 
    var self = this; 
    self.items = ko.observableArray([ 
     { id: 23 }, 
     { id: 47 }, 
     { id: 13 }, 
     { id: 6 }, 
     { id: 3 } 
    ]); 
    self.activeItemId = ko.observable(self.items()[0].id); 
    self.setActiveItem = function (item) { 
     self.activeItemId(item.id); 
    } 
}; 
ko.applyBindings(new AppViewModel()); 

要更改幻灯片，我增加了一个功能，即改变activeItemId观察到的视图模型setActiveItem。这会将active类设置为该幻灯片。您可以将该功能用作点击事件处理程序，或者您想要更改幻灯片的任何交互模式。

我以前$index从淘汰赛，而不是幻灯片观察到的，你会得到一个免费:)

编辑：我已经把它一起在的jsfiddle您与玩：http://jsfiddle.net/74jwZ/1/

单击幻灯片以使其处于活动状态。