KnockoutJS綁定未使用可觀察集合進行更新

Question

我正在使用KnockoutJS來創建一個簡單的旋轉動畫。 我有一些包含標題和描述的項目，我騎自行車通過這些項目。

在標題和描述下面，我顯示了一些分頁按鈕，活動按鈕應該應用了一個樣式。

但是，不更新分頁按鈕的樣式。 目前，所有分頁按鈕都應用了樣式，而不是僅對樣式化活動頁面進行樣式化。 我創建了一個顯示我的問題的jsFiddle 。

我究竟做錯了什么？

JavaScript的：

var AppViewModel = function () {
    this.currentItem = ko.observable();
    this.items = ko.observableArray([
    new Item("titleA", "descriptionA"),
    new Item("titleB", "descriptionB"), ]);

    this.tick = function () {
        var item = this.items.shift();
        if (item) {
            item.visible(false);
            this.items.push(item);
        }
        this.items()[0].visible(true);
    };

    this.tick();
    setInterval(function () {
        _this.tick();
    }, 1000);
}

var Item = function (title, description) {
    this.title = title;
    this.description = description;
    this.visible = ko.observable(false);
}

ko.applyBindings(new AppViewModel());

HTML：

<div data-bind="foreach: items">
    <div data-bind="visible:visible"> <span data-bind="text: title"></span>

        <blockquote data-bind="text: description"></blockquote>
    </div>
</div>
<nav>
    <ul data-bind="foreach: items">
        <li data-bind="style: { color: visible ? 'red' : 'black'} ">X</li>
    </ul>
</nav>

Answer 1

我認為當你在測試條件下使用observable時，你需要正確調用它，否則你要求它解決的是js中是否可見是一個真正的條件，函數是：

<ul data-bind="foreach: items">
    <li data-bind="style: { color: visible() ? 'red' : 'black'} ">X</li>
</ul>

這似乎在你的jsFiddle中為我解決了。