javascript - External Template in Webpack App Running Marionette -

javascript - External Template in Webpack App Running Marionette -

i'm setting application webpack , running front-end backbone marionette. i've managed application scripts running [generating layoutview within controller within app module in amd/require], can't figure out templating.

in past, i've used underscore templates, webpack prefers jade , handlebars. switched jade , still layoutview returns error:

uncaught undefinedtemplateerror: cannot render template since null or undefined.

when console log out rendered jade template get: <div class="glossary-container"></div>

here's layoutview code review:

marionette = require 'marionette' applayouttemplate = (require 'templates/applayouttemplate.jade')() console.log applayouttemplate class applayoutview extends marionette.layoutview initialize: -> template: applayouttemplate regions: glossarycontainer: '.glossary-container'

in order utilize handlebars template engine marionette need rewrite few methods in marionette.

and suggest load templates within marionette , using kind of caching:

first rewrite marionette.templatecache.prototype.loadtemplate :

marionette.templatecache.prototype.loadtemplate = function (yourtemplateid) { var yourtemplate, url = 'your/path/to/templates' + yourtemplateid + '.html'; if (handlebars.templates && handlebars.templates[yourtemplateid]) { // cache yourtemplate = handlebars.templates[yourtemplateid]; } else { // remote resource backbone.$.ajax( { async : false, url : url, success : function ( templatehtml ) { yourtemplate = templatehtml; } } ); } homecoming yourtemplate; };

and rewrite marionette.templatecache.prototype.compiletemplate

marionette.templatecache.prototype.compiletemplate = function (yourtemplate) { if ($.isfunction(yourtemplate)) { homecoming yourtemplate; } else { homecoming handlebars.compile(yourtemplate); } };

after load view like:

marionette = require 'marionette' class applayoutview extends marionette.layoutview initialize: -> template: 'path_to_your_template/without_extension' regions: glossarycontainer: '.glossary-container'

this work handlebars. not familiar jade, i'm sure should same.

javascript templates dependencies marionette webpack