Question

What I’d like to achieve is:

• after a template is rendered bind to form submit to add a spinner
• before a template is rendered remove the spinner if present

I guess it’d be easy to achieve if there were a way to bind around Handlebars’ rendering. I haven’t yet found any clues that it would be possible.

The way I’m trying to solve this might not be the correct way, so feel free to suggest other means.

It’s a single-page-app using Davis for routing and jQuery for DOM manipulation.

Answer 1

The first problem of binding to form submit could be solved with jQuery’s on handler $(document).on("submit", "form", function(event) { ... });. That works for all the forms whenever they’re appended to the DOM.

For the rendering part, make a small jQuery plugin that wraps the .html() call and triggers an event. Then bind the content element to listen for that. E.g. $("#content").bind("render", function() { /* REMOVE SPINNER */ }); and $("#content").render(/* WHATEVER IT TAKES TO GET HTML OUT OF HANDLEBARS */);. And finally the plugin:

(function($) {
  $.fn.render = function(htmlString) {
    var selector = this;
    selector.html(htmlString);
    selector.trigger("render");
  };
})(jQuery);

I created a fiddle to demonstrate the latter case (without Handlebars).