jasny-bootstrap navbar в метеорном приложении не работает

Question

Я использую Meteor 0.9.1.1 и добавил пакеты nemo64:bootstrap и mrt:bootstrap-jasny. Я пытаюсь заставить работать с ним меню навигации, но моя кнопка кажется скрытой или не отображается (я не знаю, какая именно). Пакет начальной загрузки Meteor поставляется с файлом custom.json, который позволяет мне переключать, какие модули загружены... может быть, мне не хватает одного, но я не знаю. Это меню http://jasny.github.io/bootstrap/components/ и вот мой код:

<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

Я нашел проблему!

Meteor компилирует все js-файлы перед отправкой на клиентский компьютер. Я удалил пакет jasny meteor, убедившись, что у меня есть только пакет nemo64:bootstrap, затем поместил js-файл jasny-bootstrap в каталог /client.

Мне не нужно было $('.navmenu').offcanvas() инициатор в конце концов. Теперь все работает.

Answer 2

Вам необходимо активировать плагины, как это с Javascript, согласно документации:

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

Теперь общая проблема заключается в том, где поставить вышеуказанную строку. Скрипты, которые делают это автоматически на основе класса css, обычно делают это после того, как DOM заканчивает рендеринг, предполагая, что именно тогда все элементы страницы прорисовываются. Это, конечно, неверно в Meteor, когда шаблоны динамически добавляются через JS. Таким образом, в Метеоре вам нужно вызвать метод инициализации самостоятельно, когда вы знаете, что элемент уже отрендерен - и в 99,98% случаев rendered Обратный вызов соответствующего шаблона - подходящий момент:

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