Question

我正在使用Meteor 0.9.1.1，我添加了nemo64：bootstrap和mrt：bootstrap-jasny软件包。我正在尝试使用offcanvas导航菜单来使用它，但我的按钮看起来像是隐藏或没有渲染（我不确定哪个）。 Meteor bootstrap包附带了一个custom.json文件，允许我切换加载了哪些模块......也许我错过了一个，但我不知道。这是菜单http://jasny.github.io/bootstrap/components/#navmenu-offcanvas，这是我的代码：

<template name="navmenu">
<div class="navbar navbar-default navbar-fixed-top">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="body" data-canvas="#myNavmenuCanvas" data-placement="left">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left" role="navigation">
    <a href="#">Celery seakale</a>
    <a href="#">Dulse daikon</a>
    <a href="#">Zucchini garlic</a>
    <a href="#">Catsear azuki bean</a>
    <a href="#">Dandelion bunya</a>
    <a href="#">Rutabaga</a>
</nav>

{"modules": {

"normalize":            true,
"print":                false,

"scaffolding":          false,
"type":                 true,
"code":                 false,
"grid":                 true,
"tables":               false,
"forms":                true,
"buttons":              true,

"glyphicons":           true,
"button-groups":        false,
"input-groups":         false,
"navs":                 true,
"navbar":               true,
"breadcrumbs":          false,
"pagination":           false,
"pager":                false,
"labels":               false,
"badges":               false,
"jumbotron":            false,
"thumbnails":           false,
"alerts":               false,
"progress-bars":        false,
"media":                false,
"list-group":           false,
"panels":               false,
"wells":                false,
"close":                false,

"component-animations": true,
"dropdowns":            true,
"modals":               false,
"tooltip":              false,
"popovers":             false,
"carousel":             false,

"affix":                true,
"alert":                false,
"button":               true,
"collapse":             true,
"scrollspy":            true,
"tab":                  false,
"transition":           true,

"utilities":            true,
"responsive-utilities": true
}}

我在navmenu.js文件中添加了这个，现在当页面加载时菜单会滑入，但我仍然没有按钮，实际上无法“操作”菜单。

Template.navmenu.rendered = function() {
    $('.navmenu').offcanvas()
}

Answer 1

您需要使用Javascript按the documentation：

激活插件

$('.navmenu').offcanvas();

现在，常见的问题是放在上面的那一行。基于css类自动执行此操作的脚本通常在DOM完成呈现后执行此操作，假设是在绘制所有页面元素时执行此操作。当通过JS动态添加模板时，Meteor当然不是这样。因此，在Meteor中，当您知道元素已经被渲染时，您需要自己调用初始化方法 - 在99.98％的情况下，相应模板的rendered回调是正确的时刻：

Template.navmenu.rendered = function() {
  $('.navmenu').offcanvas();
});

Answer 2

我发现了这个问题！

Meteor在发送到客户端计算机之前编译所有js文件。我删除了jasny meteor包，确保我只添加了nemo64：bootstrap包，然后将jasny-bootstrap js文件放入/ client目录。

毕竟我不需要$('.navmenu').offcanvas()发起人。现在一切正常。

流星应用程序中的jasny-bootstrap导航栏无法正常工作

2 个答案: