Newbie question bs4

help
1

Hi @jkuester Firstly thanks a ton for your package BS4 and keeping blaze alive!

I just tried to use BlazeBs4, loaded the templates in hello.onCreated, (console even says templates are loaded) but I still get the “no such template” for button.

Can you pls help.

Thanks, Rajpa

2

Hi @raskal can you show a bit of the code or Link a repo on GitHub? Without code is always hard to guess :wink:

3

Thanks for the prompt response @jkuester …!

It is just the boilerplate code added with the import statements and the template loading code… here it is…

mport { BlazeBs4 } from ‘meteor/jkuester:blaze-bs4’;

import ‘bootstrap’;

import ‘bootstrap/dist/css/bootstrap.css’; // this is the default BS theme as example

import popper from ‘popper.js’;

global.Popper = popper; // fixes some issues with Popper and Meteor

import { Template } from ‘meteor/templating’;

import { ReactiveVar } from ‘meteor/reactive-var’;

import ‘./main.html’;

import ‘./accounts-config’;

Meteor.startup(function () {

console.log(“Meteor startup…”);

GoogleApi._host = ‘https://people.googleapis.com/v1’;

});

Template.hello.onCreated(function helloOnCreated() {

BlazeBs4.alert.load().then(() => {

Promise.all([

  BlazeBs4.button.load(),

  BlazeBs4.navbar.load(),

]).then(bs4loaded => console.log('required templates loaded'))

})

});

This code returns button template not found…

—html—

{{#if currentUser.profile.name}}

{{#button colortype="primary" label="Large Button" size="lg"}} {{/button}}

{{/if}}

4

I see, the guide is missing an important fact here: You need to determine the state if the components are loaded or not and prevent the Template from rendering the button until it’s loaded.

You can use a ReactiveVar for that:

// keep this code outside of Template.onCreated, so it is only called once
const bs4ComponentsLoaded = new ReactiveVar(false)
Promise.all([
  BlazeBs4.alert.load(),
  BlazeBs4.button.load(),
  BlazeBs4.navbar.load(),
]).then(() => bs4ComponentsLoaded.set(true))

Template.hello.helpers({
  loadComplete() {
    return bs4ComponentsLoaded.get() // will return false until the promise resolved
  }
})

<template name="hello">
  {{#unless loadComplete}}
    ... loading
  {{else}}
    {{#if currentUser.profile}}
      {{#button colortype="primary" label="Large Button" size="lg"}} {{/button}}
    {{/if}}
  {{/unless}}
</template>
5

Awesome, that works! Thanks a ton!!