angularjstemplatesbackbone.jstypescriptmarionette

Pass Angular HTML template to Backbone template


I'm trying to slowly convert a Backbone App to Angular. It's actually using Marionette to be precise. In each of my current Marionette views, they are a Marionette.ItemView. For the template to show, I do this:

    get template() {
        return _.template(nameOfMyTemplate, { myModel: this.model });
    }

nameOfMyTemplate would be my AwesomeTemplate.template.html file that is in my solution.

I was wondering how I could go about just passing my template.html without calling _.template in a Backbone or Marionette app? So somewhere in my backbone view or marionette.itemview, I could do

template: NewAwesomeAngularTemplate.template.html // where NewAwesomeAngularTemplate.template.html is a file in my solution

I wasn't able to find much info on how people were converting their apps to Angular from Backbone or Marionette.


Solution

  • Marionette expects all templates to be immediately available, not having to be fetched async. The view.template function can be easily overwritten but it needs to immediately return a string (or return a function that will immediately return a string).

    There was an old fork called Marionette.Async which enabled fetching of templates on-demand but it was abandonded long ago after the maintainers determined it to be A Really Bad Idea.

    Your best bet is to build a mechanism that either loads all the templates into memory up front (like embedding them in a single JS file or the main HTML page) or a custom mechanism that ensures templates are fetched as-needed before the view gets used. The former will be much easier but viability depends on how many templates you have and how big they are.