Meteor 1.5: dynamic import for Blaze
I have two questions:
1) I want to use Meteor 1.5 Dynamic Import for Blaze, but all examples and tutorials are for React. So I am confused how exactly it can be used. Can anyone provide examples of this.
2) I am using packages from js.com atmosphere like amcharts which I only need in the admin Dashboard. How do I import them dynamically?
Thank you Advance!
UPDATE (solution):
Below is homepage.html (parent template)
<template name="homepage">
Homepage Content
{{> Template.dynamic template=content}}
</template>
login.html (child template)
<template name="login">
You're logged in!
</template>
login.js
import '../homepage/homepage.js';
import './login.html';
API = function () {
BlazeLayout.render("homepage",{content: 'login'});
}
export { API }
main.js
LoadLogin = function () {
import('/imports/modules/common/login/login.js').then(function (api) {
api.API();
})
}
/lib/route.js
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
FlowRouter.route('/', {
name: 'homepage',
action() {
LoadLogin();
}
});
source to share
I'm developing my own admin panel, Meteor Candy , which will be driven by dynamic imports, so I'm happy to share how I got it working.
First, we have a view.html:
<template name="admin">
Admin
</template>
Secondly, we have JS logic:
import { Template } from 'meteor/templating';
import { Meteor } from 'meteor/meteor';
import { Blaze } from 'meteor/blaze';
import './view.html';
API = {}
API.render = function () {
Blaze.render(Template.admin, document.body);
}
export { API }
Finally, we just need to import this code and run our template to render on the page:
openAdmin = function () {
import('./imports/admins').then(function (api) {
api.render()
})
}
As soon as something triggers a function openAdmin()
, the templates will be imported from the server and the render function is called.
source to share
The main method for dynamically importing modules in Meteor 1.5 using Blaze is as follows:
Template.theTemplate.events({
'click button'(event, instance) {
import("foo").then(Foo => {
console.log(Foo);
});
}
});
Make sure you take a close look at how your module is imported, because apparently some refactorings may be needed when called in your code. For example, using "zxcvbn":
WAS
const result = zxcvbn(pwd);
IS
const result = zxcvbn.default(pwd);
source to share