Ruby Inside JavaScript Block [Slim Template]

ruby inside javascript block [slim template]

You can use a style similar to string interpolation. See example below.

javascript:
  var config = { 
    custom: "#{my_value ? 'truthy' : 'falsy'}",
    current_user: #{raw current_user.to_json}
  };

** Update below **

If you want more advanced configuration I would recommend to create a class, for example

class ClientConfig
  attr_accessor :foo, :bar

  # .. code

  def to_json
    { foo: foo, bar: bar }.to_json
  end
end

# in view file
javascript: 
  var config = ClientConfig.new.to_json

Else you also have the opportunity to create a ruby partial I've created an example below who may not be so beautiful but I works.

# template_path/_config.html.ruby
def configuration
  { foo: "Hello", bar: "World" }
end

def july_special
  { june_key: "It's June" }
end

def month_name
  Date.today.strftime("%B")
end

config = month_name == 'July' ? configuration.merge(july_special) : configuration

content_tag :script, config.to_json.html_safe

# viewfile
= render 'template_path/config'

So my point is that there are multiple ways of doing this and you should try to find the way the one that suits you and your application the most. In my case, I would use my first example (before the update) if I just need one or two values else I would go for the class ClientConfig.

how to embed the result of a Ruby variable in a slim Javscript block

According to the docs, it looks like you want:

javascript: 
  window.ads.hasMap = #{show_map}

That is, wrap your ruby variable or method in #{...}.

How to embed dynamic Ruby code to javascript section in Slim templates?

what i prefer to do, is to keep all the javascript in a separate file.

for example, i would do it as follows(jquery):

in your layout:

...

<body data-product-ids="<%= existing_ids.to_json %>"
      data-products-json="<%= @filter.data.to_json %>">

.. in js:

// create your application namespace
$.myapp = {};
$.myapp.allProductIds = $.parseJSON( $('body').attr('data-product-ids') );
$.myapp.products = $.parseJSON( $('body').attr('data-products-json') );

so, you'll then use it in js like so:

$.myapp.allProductIds

Set Javascript Type in Ruby Slim File

You could just use a regular script tag and escape the javascript:

script type="application/ld+json"
  | alert('hi’)

Or you could create a shortcut to accomplish this:

From https://github.com/slim-template/slim:

You can also set additional fixed value attributes to a shortcut.

Slim::Engine.set_options shortcut: {'^' => {tag: 'script', attr: 'data-binding',
  additional_attrs: { type: "text/javascript" }}}

Then

^products
  == @products.to_json

which renders to

<script data-binding="products" type="text/javascript">
    [{"name": "product1", "price": "$100"},
     {"name": "prodcut2", "price": "$200"}]
</script>

Prevent Slim from parsing code inside script -tags

You could use | for verbatim text:

script#items type="text/html"
  |
    <ul class="items">
      {{#each items}}
        <li>{{title}}</li>
      {{/each}}
    </ul>

which produces:

<script id="items" type="text/html"><ul class="items">
  {{#each items}}
    <li>{{title}}</li>
  {{/each}}
</ul></script>

Ruby variables in JavaScript snippet not working with Slim lang

This will probably fix it

script id="IntercomSettingsScriptTag"
  |
    window.intercomSettings = {
      // TODO: The current logged in user's email address.
      email: "#{@user.email}",
      // TODO: The current logged in user's sign-up date as a Unix timestamp.
      created_at: #{@user.created_at.to_i},
      app_id: [redacted]
    };

Inheritance in Slim template language

It looks that I found the solution for Slim with Sinatra:

layout.slim

html
  body
    == yield

form.slim

== slim :layout
  div.form
    == yield

== slim :form
  form
    input type="text" name="email"
    input type="submit"

Ruby Inside JavaScript Block [Slim Template]