Question

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

这是我的View Model中的相关代码：

    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，以便对该位进行排序）。

<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>

（这是我想要的，我只是把它放在这里展示我的大纲。）

虽然这种方式有效，但它似乎并不是最好的＆＃34;在Knockout中这样做的方式，我想知道是否有人会介意给我一些关于他们如何做的建议。

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

谢谢！

Answer 1

当使用Knockout对使用内置绑定不容易完成的DOM执行自定义行为时，您应该创建自定义绑定。我已经将您的代码转换为自定义绑定（无论如何都是滚动部分）：

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/

滚动时更改导航活动类

1 个答案: