Question

First, 2 common (basic) approaches:

# returning from some FoosController method
respond_to do |format|
  # 1. render the out a json representation
  format.json { render :json => @foo }

  # 2. render an RJS template, say update.js.erb
  format.js { render }
end

# in update.js.erb
$('#foo').html("<%= escape_javascript(render(@foo)) %>")

These are obviously simple cases but I wanted to illustrate what I’m talking about. I believe that these are also the cases expected by the default responder in rails 3 (either the action-named default template or calling to_#{format} on the resource.)

---

The Issues

With 1, you have total flexibility on the view side with no worries about the template, but you have to manipulate the DOM directly via javascript. You lose access to helpers, partials, etc.

With 2, you have partials and helpers at your disposal, but you’re tied to the one template (by default at least). All your views that make JS calls to FoosController use the same template, which isn’t exactly flexible.

---

Three Other Approaches (none really satisfactory)

1.) Escape partials/helpers I need into javascript beforehand, then inserting them into the page after, using string replacement to tailor them to the results returned (subbing in name, id, etc).

2.) Put view logic in the templates. For example, looking for a particular DOM element and doing one thing if it exists, another if it does not.

3.) Put logic in the controller to render different templates. For example, in a polymorphic belongs to where update might be called for either comments/foo or posts/foo, rendering commnts/foos/update.js.erb versus posts/foos/update.js.erb.

---

I’ve used all of these (and probably others I’m not thinking of). Often in the same app, which leads to confusing code. Are there best practices for this sort of thing? It seems like a common enough use-case that you’d want to call controllers via Ajax actions from different views and expect different things to happen (without having to do tedious things like escaping and string-replacing partials and helpers client side).

Any thoughts?

Answer 1

The best practice is to have your Web UI use the RESTful API. That is, get and put resources in JSON format using JavaScript running in the client, just as a third party might get and put resources in JSON format using RestClient. That means you don’t have .rjs or .js.erb templates on the server – you might instead have Mustache or Handlebars or jQuery templates, plus the glue JavaScript, embedded in (or statically linked to from) the HTML page originally delivered to the Web client.

Of course, the quick-and-dirty approach of using remote => true, and going to the server and rendering a JavaScript code template to produce JavaScript that will be executed on the client … is easier. And it was fairly good practice for a while. But we need JavaScript for a data format now, and we have superior capabilities today for pulling data in JSON format and rendering templates within the client.