Question

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

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);
    };
}

我无法在列表中查看当前播放歌曲的选定类。该类被正确设置，但是一旦下一个轨道开始，它也会使该类“被选中”，但该类需要从上一个轨道中删除。

我知道我需要引用父母才能使这个工作起来，但不知怎的，我无法将我的大脑包裹起来如何让它发挥作用。

example

因为我在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操作。谢谢你的帮助！

Answer 1

很抱歉不是玉器专家，但看起来你没有重置之前播放的曲目的isactive标志。

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

1。）将当前活动的轨道isActive标志设置为false。

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

上

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

这应该可以解决你的问题

KnockoutJS在迭代列表项上切换类

1 个答案: