Templates with Opal

Opal includes support for running erb templates on the client. Haml templates
can also be used via the opal-haml gem.

Basic Templates

If you require template.rb from the stdlib, then all compiled templates will
be available on the Template object. Each compiled template will be an
instance of Template, which provides a basic standard rendering api to make
rendering a uniform method on the client.

For example, to access a template named user:

require 'template'

template = Template['user']
context  = User.new('Ford Prefect')

puts template.render(context)
# =&gt; "<div>...</div>"

#render() will run the template in the given context, and return the result
as a string. This is usually a html string, but it can be used for any dynamic
content.

Registered Templates

You can get a quick list of all registered templates using .paths:

Template.paths
# => [#, #]

These names are the keys used to access a template:

Template['login']
# => #

ERB Templates

Support for erb templates is built in directly to the opal gem and stdlib.
There is one caveat though when working with sprockets - it must have the
.opalerb file extension, instead of .erb. This is because sprockets has a
built in handler for .erb files.

If we have the same user class as above, create an app/views/user.opalerb
file:

<div class="row">
  <div class="col-md-3">&lt;%= self.name %&gt;</div>
</div>

Again, you must then require the template (without the .opalerb extension):

# app/application.rb
require 'opal'
require 'views/user'

And then you can access and render the template:

# app/application.rb

template = Template['views/user']
user = User.new('Ford Prefect')

puts template.render(user)
# =&gt; "<div class="row">...</div>"

Haml templates

opal-haml allows .haml templates to be compiled, just like opal compiles
ruby code, ready to run on the client.

To get started, add to your Gemfile:

# Gemfile
gem 'opal'
gem 'opal-haml'

opal-haml simply registers the .haml template to be handled under sprockets.
This means, that you can simply require() a haml template in your code.

Lets say you have the following simple opal app:

# app/application.rb
require 'opal'

class User < Struct.new(:name, :age)
end

We want to create an instance of the User class and render it using a haml
template. Lets first create that template as app/views/user.haml:

-# app/views/user.haml
.row
  .col-md-6
    = self.name
  .col-md-6
    = self.age

You are nearly ready to go. Lets create a user instance and render the template
in the context of that user:

# app/application.rb
require 'opal'
require 'views/user'

class User < Struct.new(:name, :age)
end

ford = User.new('Ford Prefect', 42)
template = Template['views/user']

puts template.render(ford)

Note, when requiring haml templates you do not need to specify the .haml
extension. This code will print the rendered html to the console. If you
check it out, you should see it compiled into something like the following:

<div class="row">
  <div class="col-md-6">
    Ford Prefect
  </div>
  <div class="col-md-6">
    42
  </div>
</div>