1

我正在使用 Meteor 0.9.1.1，并且添加了 nemo64:bootstrap 和 mrt:bootstrap-jasny 包。我正在尝试让 offcanvas nav menu 使用它，但我的按钮似乎已隐藏或未呈现（我不确定是哪个）。Meteor 引导程序包带有一个 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()
}
4

2 回答 2

1

根据文档，您需要使用 Javascript 激活插件：

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

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

Template.navmenu.rendered = function() {
  $('.navmenu').offcanvas();
});
于 2014-09-16T04:45:46.657 回答
0

我发现了问题！

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

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

于 2014-09-19T00:40:14.263 回答