Javascript 迭代列表项上的KnockoutJS切换类

我有多个视图模型，一个称为“音乐”，另一个称为“曲目”，如下所示：

var Music = function (o, json) {
    var self            = this;
    self.localName      = ko.observable(json);
    self.thumbnail      = ko.observable();
    self.isSingle       = ko.observable(false);
    self.title          = ko.observable();
    self.year           = ko.observable();
    self.genre          = ko.observable();
    self.viewDetails    = ko.observable(false);
    self.tracks         = ko.observableArray();
    self.showAlbum  = function () {
        self.viewDetails(false);
        var album = self.localName();
        o.currentAlbum = album;

        if(self.isSingle() === true){
            _playSingle(o, album);
        } else {
            self.viewDetails(true);
            if(self.viewDetails(true) ){
                $(o.musicListSelector+' > li').hide();
            }

        }
    };
}

var Track = function (o, data) {
    var self            = this;
    self.name           = data;
    self.isActive       = ko.observable(false);
    self.playTrack      = function () {
        if(self.isActive(true)){
            self.isActive(false);
        }
        self.isActive(true);
        var trackname = self.name;
        _trackClickHandler(o, trackname);
    };
}

我无法切换列表中当前播放歌曲的选定类别。 该类设置正确，但一旦下一个曲目开始，它也会“选择”该类，但该类需要从上一个曲目中删除

我知道我需要参考家长的意见才能让它发挥作用，但不知何故，我无法思考如何让它发挥作用

因为我在NodeJS项目中使用了这段代码，所以HTML是Jade。我希望这是有意义的：

    // ko if: music().length > 0
    ul.music(data-bind="foreach: music")
        li(data-bind="click: showAlbum , css : {'active' : viewDetails}")
            img.cover(data-bind="attr: { src: thumbnail }")
            .overlay
            a.title(data-bind="text:localName", style="visibility:hidden;")
            #albumInfo      
                h2(data-bind="text:title")
                // ko if: genre() !== 'Unknown' && genre() !== null
                .genre(data-bind="text:genre")
                // /ko
                // ko if: year() !== 'Unknown' && year() !== null
                .year(data-bind="text:year")
                // /ko
            #tracklist
                ul#tracks(data-bind="foreach: tracks")
                    li(data-bind="click: playTrack , css : {'selected' : isActive}")
                        i.play.icon
                        .title(data-bind="text:name")
    // /ko      

如果可能的话，我希望避免使用例如jQuery的DOM操作。

---

谢谢你的帮助

抱歉，我不是翡翠专家，但看起来您没有为之前播放的曲目重置isactive标志

建议在播放曲目方法中执行以下操作：

1.）将当前活动曲目isActive标志设置为false

2.）将当前播放的曲目存储到刚才选择的曲目中。在您的viewModel上

3.）然后将isActive标志设置为true

我相信这会解决你的问题