Backbone View to Embed Gists

backbone-view-gister.js

/*
 * View that listens for changes to a Post model before rendering
 * a view for the post content. Employs Gister module to embed
 * Gists after rendering.
 */
define([
  'jquery',
  'backbone',
  'gister',
  'mustache',
  'text!templates/post.html'
], function($, Backbone, Gister, Mustache, PostTmpl) {
  
  var PostView = Backbone.View.extend({
    // Wherever you want to append the rendered view.
    // Note, the MutationObserver will observe() this element.
    el: 'body',
    
    // Must pass the dataAttrName used by Gister to the view's constructor.
    initialize: function(options) {
      var me = this;
      this.listenTo(this.model, 'change', this.render);
      this.mo = new MutationObserver(function() {
        Gister.embedGists(options.dataAttrName);
        // Only need to embed Gists once, so stop listening for changes.
        me.mo.disconnect();
      });
    },
    
    render: function(post, options) {
      // Be sure to observe before updating the DOM.
      // observe() requires a DOM node, and an optional configuration.
      this.mo.observe(this.$el.get(0), { childList: true });
      this.$el.html(Mustache.render(PostTmpl, this.model.toJSON()));
    }
  });
  
  return PostView;
});