Render Partials for jQuery UJS

create.js.erb

(function () {
  var partials = {
    avatar: '<%= j render partial: "avatar", locals: { avatar: @profile.avatar } %>',
    avatarForm: '<%= j render partial: "form" %>'
  }

  $.rails.renderPartials(partials);
})();

decamelize.js

function (str, sep) {
  if (typeof str !== 'string') {
    throw new TypeError('Expected a string');
  }

  sep = typeof sep === 'undefined' ? '_' : sep;

  return str
    .replace(/([a-z\d])([A-Z])/g, '$1' + sep + '$2')
    .replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + sep + '$2')
    .toLowerCase();
};

render-partials.js

//= require decamelize

/**
 * Extend jquery-ujs to ease updating partial renders
 */
$.rails.renderPartials = (function () {
  /**
   * Look up partial's wrapper
   * @param partial
   * @returns {*|jQuery|HTMLElement}
   * @private
   */
  function _getPartialElement (partial) { return $('[data-partial~=' + decamelize(partial, '-') + ']'); }

  /**
   * If prop is a partial, render it
   * @param prop
   * @param partials
   * @private
   */
  function _checkForPartial (prop, partials) {
    var isPartial = partials.hasOwnProperty(prop);

    if (isPartial) { _renderPartial(prop, partials); }
  }

  /**
   * Get partial's wrapper and set its HTML content
   * @param prop
   * @param partials
   * @private
   */
  function _renderPartial (partial, partials) {
    var $el = _getPartialElement(partial),
      partialHtml = partials[partial];

    $el.html(partialHtml);
  }

  /**
   * Enumerates through properties, checking for partials
   * @param partials
   */
  function renderPartials (partials) { for (var prop in partials) { _checkForPartial(prop, partials); } }

  return renderPartials;
})();

show.html.haml

%div{ data: { partial: "avatar" } }= render partial: "avatars/avatar", locals: { avatar: @profile.avatar }
%div{ data: { partial: "avatar-form" } }= render partial: "avatars/form"