0

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>
4

1 に答える 1

2

テスト条件でオブザーバブルを使用している場合は、それを適切に呼び出す必要があると思います。そうでない場合、解決するように求めているのは、可視がjsの真の条件であるかどうかであり、関数は次のとおりです。

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

これはあなたのjsFiddleで私のためにそれを修正するようです.

于 2013-02-05T10:15:27.370 に答える