淘汰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/

單擊幻燈片以使其處於活動狀態。