Html 不通过可观察的淘汰赛显示值。

克什蒂吉·阿尼尔·兰加里

我正在开发一个视频播放器应用程序，我设置了各种视频播放器应用程序功能，如播放、暂停、前进和后退。

我遇到了快进按钮的问题，当我点击快进时 Html DOM 不显示第一个快进，即 1.5 倍，当我再次点击 2 倍时，它显示......我需要帮助弄清楚，为什么会这样不是 1.5 倍？

这是我的 html

<!-- playback controls -->
        <div class="clearfix playback-set1">
            <div class="pull-left">
                <div class="edit-btn-list-container">
                    <ul class="unstyled-list edit-btn-list clearfix">
                        <li style="margin-top: 8px; width: 45px; margin-left: 0;">
                            <a data-bind="click:play, event:{ended:playerOnEnded}" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Play" style="font-size: 25px;"><span data-bind="if: !playerPlaying()"><i class="fa fa-play"></i></span><span data-bind="if: playerPlaying"><i class="fa fa-pause"></i></span></a>
                        </li>
                        <li><a data-bind="click:rewindClick" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Rewind"><i class="fa fa-fast-backward fa-fw"></i><!-- ko if:intervalRewind() != null --><span data-bind="text:playbackRateIndicator"></span><!-- /ko --></a></li>
                        <li><a data-bind="event:{mousedown:function(){startstep('backward');}}" data-placement="bottom" class="btn btn-alt btn-default" data-toggle="tooltip" data-original-title="Step Backward"><i class="fa fa-step-backward fa-fw"></i></a></li>
                        <li><a data-bind="event:{mousedown:function(){startstep('forward');}}" data-placement="bottom" class="btn btn-alt btn-default" data-toggle="tooltip" data-original-title="Step Forward"><i class="fa fa fa-step-forward fa-fw"></i></a></li>
                        <li><a data-bind="click:fastForwardClick" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Fast Forward"><!-- ko if:intervalRewind() == null --><span data-bind="text:playbackRateIndicator"></span><!-- /ko --><i class="fa fa-fast-forward fa-fw"></i></a></li>
                    </ul>
                </div>
            </div>

这里是对应的javascript代码！！

self.playbackRateIndicator = ko.observable();
    self.playbackRate0 = 1.5;
    self.playbackRate2 = 2.0;
    self.playbackRate1 = 1.0;
    self.playbackRate4 = 4.0;
    self.playbackRate8 = 8.0;

    self.fastForwardClick = function () { self.fastForward(null); }

    self.fastForward = function (playbackRate) {
        if (videoSelector().paused) {
            videoSelector().play();
        }

        if (self.intervalRewind() != null) {
            clearInterval(self.intervalRewind());
            self.intervalRewind(null);
        }
        var newPlaybackRate = self.playbackRate1;
        switch (videoSelector().playbackRate) {

              case self.playbackRate1:
                newPlaybackRate = self.playbackRate0;
                break;

            case self.playbackRate0:
                newPlaybackRate = self.playbackRate2;
                break;
            case self.playbackRate2:
                newPlaybackRate = self.playbackRate4;
                break;
            case self.playbackRate4:
                newPlaybackRate = self.playbackRate8;
                break;
            case self.playbackRate8:
                newPlaybackRate = self.playbackRate1;
                break;
            default:
                newPlaybackRate = self.playbackRate1;
                break;
        }

帮助表示赞赏。谢谢！！

罗伊

在您发布的代码中，您从未为设置值playbackRateIndicator。在您的中switch，您设置了一个局部变量。在切换结束时，您应该将该值转移到您的 observable 中：

playbackRateIndicator(newPlaybackRate);

我无法解释为什么你得到 2x 而没有得到 1.5x 因为我无法解释为什么你会看到任何变化，因为你从来没有设置相关的 observable。

尝试创建问题代码的最小完整可验证示例始终是一个好主意- 您可以编写的最简单的 Fiddle 来演示问题。首先，您通常会自己弄清楚发生了什么，但如果没有，它会给我们一些工作，我们可以确保找到问题。

这是我将如何做到的：

vm = {
  rates: [1,1.5,2,4,8],
  playbackRateIndicator: ko.observable(),
  intervalRewind: ko.observable(null),
  fastForwardClick: function () {
    console.log("Forward!");
    let currentRateIndex = vm.rates.indexOf(vm.playbackRateIndicator()) + 1;
    
    if (currentRateIndex > vm.rates.length - 1) {
      currentRateIndex = vm.rates.length - 1;
    }
    vm.playbackRateIndicator(vm.rates[currentRateIndex]);
  }
};

ko.applyBindings(vm);

.unstyled-list {
  list-style: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="edit-btn-list-container">
  <ul class="unstyled-list edit-btn-list clearfix">
    <li>
      <a data-bind="click:fastForwardClick" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Fast Forward">
        <!-- ko if:intervalRewind() == null --><span data-bind="text:playbackRateIndicator"></span>
        <!-- /ko --><i class="fa fa-fast-forward fa-fw"></i></a>
    </li>
  </ul>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。