Question

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

任何人有任何解决方案吗？

由于

Answer 1

我使用Bootstrap 3和ScrollSpy作为Meteor项目中的侧边栏导航菜单。我将在下面包含我的模板和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 2

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

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

Answer 3

由于模板中的反应性有效，因此在模板中可能需要将锚点放在{{#constant}}{{/constant}}块中。

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

Answer 4

我遇到了与bootstrap carousel和affix相同的问题。在我将正常运行的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级别上做了）。另一个原因可能是在渲染模板之前加载了引导脚本，因此绑定到某些标签的功能根本不起作用。这就是为什么你需要重新启动bootstrap功能才能正常工作。

同样的事情涉及Corousel功能。在渲染模板后需要重新启动它。

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

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

4 个答案: