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>

我想通过使用knockout 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());

要更改幻灯片，我向viewmodel setActiveItem添加了一个更改activeItemId可观察对象的函数。这会将active类设置为该幻灯片。您可以将该函数用作单击事件处理程序，或者您想要更改幻灯片的任何交互模式。

我使用了来自淘汰赛的$index代替你的幻灯片观察，你可以免费获得那个：）

编辑：我已将它们整合在一个JSFiddle中，供您使用：http://jsfiddle.net/74jwZ/1/

点击幻灯片使其激活。

knockout js循环遍历元素以增加数据属性值

1 个答案: