Rustam A. Gasanov

$ echo "Inspired developer's blog" > /dev/null

How to Use ERB With ECO

| Comments

In my current project we use Rails with Backbone(Marionette). For Rails, it’s essential to use .erb. For Backbone, we use .jst.eco. Everything works fine unless you need Ruby helpers(asset_url/asset_path for example) in JavaScript templates. Here I’ll show how to combine the power of erb and eco template engines.

Say, you need to put a link to compiled asset in your JavaScript template.

Solution 1

Add .erb to your .js(.coffee) Marionette View object and generate asset_url in templateHelpers, then use generated url in the template:

new_view.js.coffee.erb
1
2
3
4
5
class New.Api extends Marionette.ItemView
  ...
  templateHelpers: ->
    apiUrl: "<%= asset_url('API_Documentation_v1.0.pdf') %>"
  ...
api.jst.eco
1
2
3
<div>
  <p><%= @apiUrl %></p>
</div>

Solution 2

Add .erb to your .jst.eco JavaScript template, so the file will be parsed by erb engine first, then by eco engine. The only issue, that’ll appear with this approach is that both engines have the same syntax: <%= %>, <%- %> etc. But the solution is quite simple. erb parses <%%= %> to <%= %>. So we can easily use <%% %> for eco and <% %> for erb, here is the example:

new_view.js.coffee
1
2
3
4
5
class New.Api extends Marionette.ItemView
  ...
  templateHelpers: ->
    jsVar: "jsVar"
  ...
api.jst.eco.erb
1
2
3
4
<div>
  <p>JS:  <%%= @jsVar %></p>
  <p>ERB: <%= asset_url('API_Documentation_v1.0.pdf') %></p>
</div>

Comments