Skip to content

Instantly share code, notes, and snippets.

@MaiAbuthraa

MaiAbuthraa/Dashboard.js

Last active June 11, 2020 08:11
Show Gist options
  • Save MaiAbuthraa/5c4201a1e6b6e967c81cc8403db42115 to your computer and use it in GitHub Desktop.
Save MaiAbuthraa/5c4201a1e6b6e967c81cc8403db42115 to your computer and use it in GitHub Desktop.
Download ZIP
Import dynamic modules Using ( Webpacker 4 and Rails 6)
Raw
application.js
//app/javascript/packs/application.js
require("@rails/ujs").start()
import pageLoader from '../components/pageLoader';
(function() {
window.pageLoader = pageLoader;
})();
Raw
Dashboard.js
//app/javascript//components/pages/Dashboard.js
export default class Dashboard {
constructor(params){
this.params = params;
console.log('Hi, this is Dashboard class',params);
}
};
Raw
pageLoader.js
//app/javascript/components/pageLoader.js
export default async function pageLoader(page, params) {
const myModule = await import(`components/pages/${page}`);
new myModule.default(params);
};
Raw
show.html.haml
//app/views/dashboards/show.html.haml
:ruby
params = {
id: 1,
name: "Mai"
}
= content_for :inline_javascript do
:plain
$(document).ready(function() {
pageLoader('Dashboard', #{params});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment