淘汰赛音频播放列表

Question

我正在创建一个基于音乐的应用程序，它使用 Knockout 进行绑定。应用程序中列出的所有曲目都是从 Soundcloud 外部提取的，如下所示：

$.getJSON('http://api.soundcloud.com/users/guy-j/tracks.json?client_id=c4bc3b1a93902abecbaca3fa4582d970', {limit: 200}, function(data) {
            vm.tracks($.map(data, function (track) {
                return {
                    artwork: track.artwork_url,
                    avatar: track.user.avatar_url,
                    date: track.created_at,
                    description: track.description,
                    duration: track.duration,
                    listens: track.playback_count,
                    permalink: track.permalink_url,
                    purhcase: track.purchase_url,
                    stream: track.stream_url,
                    track: track.title
                };
            }));
        });

这些轨道（一旦获取）被推送到一个空白的 observableArray 中，然后 HTML 视图被绑定到该数组并生成一个轨道列表。我有这样的音频播放/暂停：

要选择/播放曲目，从 observableArray 生成的每个 <li> 都有一个名为“goToTrack”的点击处理程序，然后它将一个名为“self.chosenTrackData”的可观察对象传递给选定的曲目，然后我的音频元素与“ selectedTrackData' 播放所选曲目。

我现在的问题在于，我不太确定使用 Knockout 处理下一个/上一个曲目功能的最佳方法是什么。我必须知道如何区分 observableArray 中的当前点，然后是 ++ 或 -- 取决于您选择的选项？

任何帮助将不胜感激，因为我仍在学习 Knockout！

Answer 1

我建议保留一个内部“当前曲目”编号，您可以递增或递减该编号并以此为基础进行计算。

function PlayerViewModel() {
    var self = this,
        currentTrackNo = ko.observable(0);

    // data
    self.tracks = ko.observableArray();

    // computeds
    self.currentTrack = ko.computed(function () {
        return self.tracks()[currentTrackNo()];
    });
    self.hasTrack = function (track) {
        return !!self.currentTrack();
    };
    self.hasNextTrack = ko.computed(function () {
        return currentTrackNo() < self.tracks().length - 1;
    });
    self.hasPrevTrack = ko.computed(function () {
        return currentTrackNo() > 0;
    });

    // API
    self.setNextTrack = function () {
        if (self.hasNextTrack()) {
            currentTrackNo(currentTrackNo() + 1);
        }
    };
    self.setPrevTrack = function () {
        if (self.hasPrevTrack()) {
            currentTrackNo(currentTrackNo() - 1);
        }
    };
    self.setTrack = function (track) {
        var trackNo = ko.utils.arrayIndexOf(self.tracks(), track);
        currentTrackNo(trackNo);
    };

    // init
    $.getJSON('...', {limit: 200}); etc;
}

将您的“当前曲目”视图组件绑定到currentTrack observable。确保以某种方式使用hasTrack（因为currentTrack 可能未定义）。

---

替代实现，避免维护单独的轨道号：

function PlayerViewModel() {
    var self = this;

    // data
    self.tracks = ko.observableArray();
    self.currentTrack = ko.observable();

    // computeds
    self.currentTrackNo = ko.computed(function () {
        var currentTrack = self.currentTrack();
        return ko.utils.arrayIndexOf(self.tracks(), currentTrack);
    });
    self.hasTrack = function (track) {
        return !!self.currentTrack();
    };
    self.hasNextTrack = ko.computed(function () {
        return self.currentTrackNo() < self.tracks().length - 1;
    });
    self.hasPrevTrack = ko.computed(function () {
        return self.currentTrackNo() > 0;
    });

    // API
    self.setNextTrack = function () {
        if (self.hasNextTrack()) {
            self.currentTrack(self.tracks()[self.currentTrackNo() + 1]);
        }
    };
    self.setPrevTrack = function () {
        if (self.hasPrevTrack()) {
            self.currentTrack(self.tracks()[self.currentTrackNo() - 1]);
        }
    };
    self.setTrack = function (track) {
        // make sure that track is actually in self.tracks here
        self.currentTrack(track);
    };

    // init
    $.getJSON('...', {limit: 200}); etc;
}