javascript - 更改滚动上的导航事件类

Question

我正在尝试制作一个功能与此类似的导航栏:https://jsfiddle.net/05jpxf45/但使用 knockout 。

这是我的 View 模型中的相关代码:

    self.selectedTopicName = ko.observable("");

    self.selectedTopicName.subscribe(function () {
        self.updateHighlight();
    });

    self.updateHighlight = function () {
        $('.navigation-list li').each(function (index) {
           var navTopic = $(this).attr('class').split(/\s+/)[0];
            $(this).removeClass('highlight');

            if (self.selectedTopicName().indexOf(navTopic) >= 0) {
                $(this).addClass('highlight');
            }
        });
    };

    self.scrollToPage = function (sectionRef) {
        var target = $(sectionRef);
        if (target.length) {
            console.log(target.position().top);
            $('html, body').stop().animate({
                scrollTop: target.position().top
            }, 1000);
        }

(每当用户滚动时，self.selectedTopicName 就会在我的 View 中设置，以便对该位进行排序)。

<nav class="floating-nav-container">
<ul data-bind="foreach: sideMenuPageUnitData, attr: { class: 'navigation-list' }">
    <li data-bind="attr: { class: pageRef }">
        <a data-bind="attr: { href: pageData[0].name }, text: name, click: function (data, event) { $parent.scrollToPage('#section_' + pageData[0].name) }"></a>
    </li>
</ul>
<span data-bind="text: selectedTopicName()"></span>
</nav>

(这是我想要的，我只是把它放在这里来显示我的轮廓。)

虽然这种方式有效，但它似乎并不是 knockout 中的“最佳”方式，我想知道是否有人介意给我一些关于如何做到这一点的建议。

基本上每次 selectedTopicName 更新时，这意味着用户向上或向下滚动页面，所以目前我使用订阅，然后循环遍历元素，但它看起来不太优雅。

谢谢!

Answer 1

当使用 Knockout 对 DOM 执行自定义行为(使用内置绑定(bind)无法轻松完成)时，您应该创建自定义绑定(bind)。我已经获取了您的代码并将其转换为自定义绑定(bind)(无论如何，对于滚动部分):

ko.bindingHandlers.onScroll = {
  init: function(element) {
    $(document).on("scroll", function() {
      var scrollPos = $(document).scrollTop();
      $(element).find('a').each(function() {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
          $(element).find('a').removeClass("active");
          currLink.addClass("active");
        } else {
          currLink.removeClass("active");
        }
      });
    });
  }
};

https://jsfiddle.net/05jpxf45/1/