如何让 Scroll Spy 在 Meteor/Bootstrap 3 中工作？

Question

我正在尝试让滚动间谍在带有 Bootstrap 3 的 Meteor 应用程序中工作。我安装了 Bootstrap3-LESS Meteorite 软件包，但 Meteor 不允许标签，这似乎是 Scroll Spy 的依赖项......有一个 JS 方法可以做到这一点，但是当我尝试运行流星时出现编译错误

有人有解决办法吗？

谢谢

Answer 1

一些 Javascript 方法依赖于浏览器，不能在服务器端调用。在这种情况下，Meteor 会抛出错误。 Bootstrap 是一个客户端框架，所以请务必只在客户端调用 JS 方法。

提示：要获得更详细的答案，请提供您尝试调用 JS 方法的代码。确切的错误消息也很有帮助。

Answer 2

我在 Meteor 项目中使用 Bootstrap 3 和 ScrollSpy 作为侧边栏导航菜单。我将在下面包含我的模板和 JS 文件。我应该提到一些关于 JS 的事情......我正在使用 Iron Router (https://github.com/EventedMind/iron-router) 并且命名的锚点不起作用，所以我编写了 click 事件处理程序来模仿预期的行为。另一件需要注意的事情是，您可能不得不使用 affix 的偏移值，但希望这能给您一个想法。

模板 - build.html

<template name="home_build">
    <div class="row">
        <div class="col-md-3 col-sm-4 hidden-xs hidden-print">
            <nav id="my-nav" class="affix">
                <ul class="nav nav-pills nav-stacked">
                    <li>
                        <a href="#unit-summary"><i class="fa fa-angle-double-right"></i> Unit Summary</a>
                    </li>
                    <li>
                        <a href="#desired-results"><i class="fa fa-angle-double-right"></i> Desired Results</a>
                    </li>
                    <li>
                        <a href="#instruction"><i class="fa fa-angle-double-right"></i> Instruction</a>
                    </li>
                </ul>
            </nav>
        </div> <!-- /.col -->
        <div class="col-md-9 col-sm-8">
            <div id="unit-summary" style="padding-top:44px;">
                <h3>Unit Summary</h3>
                <p>Lots of content goes here...</p>
            </div>
            <div id="desired-results" style="padding-top:44px;">
                <h3>Desired Results</h3>
                <p>Lots of content goes here...</p>
            </div>
            <div id="instruction" style="padding-top:44px;">
                <h3>Instruction</h3>
                <p>Lots of content goes here...</p>
            </div>
        </div> <!-- /.col -->
    </div> <!-- /.row -->
</template>

JS - build.js

Template.home_build.rendered = function () {
    var w = $(window),
        b = $(document.body),
        id,
        navHeight = $('#top-bar').outerHeight(true) + 20;

    b.scrollspy({
        target: '#my-nav',
        offset: navHeight
    });

    w.on('load', function () {
        b.scrollspy('refresh');
    });

    w.resize(function () {
        clearTimeout(id);
        id = setTimeout(function () { b.scrollspy('refresh'); }, 500);
    });

    setTimeout(function () {
        var sideNav = $('#my-nav');

        sideNav.affix({
            offset: {
                top: function () {
                    var offsetTop = sideNav.offset().top,
                        sideNavMargin = parseInt(sideNav.children(0).css('margin-top'), 10),
                        navOuterHeight = $('#top-bar').height(),
                        topOff = offsetTop + navOuterHeight + sideNavMargin - 12;
                    return (this.top = topOff);
                },
                bottom: function () {
                    return (this.bottom = $('#footer').outerHeight(true));
                }
            }
        });
    }, 100);
};

Template.home_build.events({
    'click #my-nav a': function (e) {
        var t = e.currentTarget,
            el = document.getElementById(t.getAttribute('href').substr(1));
        if (!!el && el.scrollIntoView) {
            el.scrollIntoView();
        }
        return false;
    }
});

Answer 3

由于模板中反应性的工作方式，可能需要在模板中将锚点放在 {{#constant}}{{/constant}} 块中。

还要确保 scrollspy javascript 实际上包含在引导程序包文件夹中。可能只是您实际上没有用于 scrollspy 的 javascript。您可以打开包文件夹中的 bootstrap.js 并查找 scrollspy。

Answer 4

我在引导轮播和词缀方面遇到了同样的问题。在我将正常运行的 html+js 移动到 Meteor 之后，轮播和词缀刚刚停止工作。我的配置是：Meteor+twbs:bootstrap+iron:router。 作为解决方案，我建议将以下代码添加到您的 JS 客户端文件中，以便 affix+scrollspy 正常工作：

Template.aboutus.rendered = function () {
//Affix initialisation  
$("#myaffix").affix({
    offset: { 
        top: 400 //data-offset-top="400"
    }
});
console.log("affix initiated");
//Scrollspy initialisation  
$('body').scrollspy({ target: '#myScrollspy' });
console.log("scrollspy initiated");

};

我认为问题的主要原因是默认情况下scrollspy函数绑定到body，并且body可能在你的模板中被省略，所以你应该添加它（我在ApplicationLayout级别做了）。 另一个原因可能是在渲染模板之前加载了引导脚本，因此绑定到某些标签的功能不起作用。 这就是为什么您需要重新启动引导函数才能正常工作的原因。

Corousel 函数也是如此。模板渲染后需要重新启动。

Template.main_content.rendered = function () {
//Carousel setup  
$("#mycarousel").carousel( { interval: 2000 } );
console.log("carousel initiated");
};