Backbone.Marionette Template Download Asynchronously

Question

We use Backbone and Backbone.Marionette for our project. Currently, we save all of our presentation templates on the server, and we overwrote the loadTemplate call to load them asynchronously.

However, when we use the layout view, since the template for the view is loaded asynchronously, it seems that we cannot immediately access the layout areas. The following is an example:

var layoutView = new Layout(); var itemView = new ItemView(); App.containerRegion.show(layoutView); layoutView.mainRegion.show(itemView); <---- This is where the issue would occur. 

If we do not download the template from the server asynchronously, it will work fine. What would be a good way to implement this? We want to save templates on the server, and not download everything at once. We also want to avoid being tied to the rendering event of the layout view throughout our code.

thanks

Answer 1

I think you need to override the Marionette.ItemView rendering function, where you first load the template data and render the view when the template loads successfully:

  render: function(){ if (this.beforeRender){ this.beforeRender(); } this.trigger("before:render", this); this.trigger("item:before:render", this); var data = this.serializeData(); var templateSrc = this.getTemplate(); $.ajax({ url: 'templatesFolder/' + templateSrc, success: _bind(function(template){ var html = Marionette.Renderer.render(template, data); this.$el.html(html); if (this.onRender){ this.onRender(); } this.trigger("render", this); this.trigger("item:rendered", this); }, this) }) return this; }, 

Answer 2

You need to grab the Marionette.Async plugin. It was built to do exactly what you want.

But you need to know that the performance implications are related to capturing patterns from a server, async. A network delay for this can make users think that the application is not responding if you do not have something on the screen that the application is working behind the scenes (for example, as a graphic image).

It would be best to capture as many templates as you can right away, reduce the latency and network transmission time. There is a blog post that my friend wrote doing exactly that.