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

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

有人有什么解决办法吗

---

谢谢

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

---

提示：为了得到更接近的答案，请提供您尝试调用JS方法的代码。确切的错误消息也很有用

我正在Meteor项目中使用Bootstrap 3和ScrollSpy作为侧栏导航菜单。我将在下面包括我的模板和JS文件。我应该提到一些关于JS的事情……我使用的是Iron Router（），而命名锚不起作用，所以我编写了click事件处理程序来模拟预期的行为。另一件需要注意的事情是，您可能需要处理

词缀

的偏移值，但希望这能给您一个想法

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

---

由于模板中的反应性的工作方式，可能需要在模板中将锚放在

{{{{{常量}}{{/常量}}

块中

---

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

我在引导旋转木马和粘贴上也遇到了同样的问题。在我将正常运行的html+js移动到Meteor后，旋转木马和粘贴就停止了工作。我的配置是：Meteor+twbs:bootstrap+iron:router。 作为一种解决方案，我建议将以下代码添加到JS客户端文件中，以便粘贴+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");
};

---

我试着按照你说的做了，我包括了代码（$（'body'）。scrollspy（{target:''navbar example'}））客户端，但是仍然没有成功，它现在编译得很好，但是scroll spy没有乐趣。。

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