javascript - knockout 音频播放列表

Question

我正在创建一个基于音乐的应用程序，它使用 Knockout 进行绑定(bind)。应用程序中列出的所有轨道都是从 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 View 会绑定(bind)到该数组并生成轨道列表。我的音频播放/暂停如下所示:

要选择/播放轨道，每个 <li>从 observableArray 生成的文件有一个名为“goToTrack”的点击处理程序，然后将一个名为“self.chosenTrackData”的可观察对象传递给选定的轨道，然后我的音频元素与“chosenTrackData”绑定(bind)以播放选定的轨道。

我现在的问题在于，我不太确定使用 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;
}

将“当前轨道” View 组件绑定(bind)到 currentTrack 可观察对象。确保以某种方式使用 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;
}