CODEWITHSUNDEEP
ruby-on-railsrubyslim-lang
wkang
wkang

Reputation: 431

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

One way:

javascript_tag do
  == "var all_product_ids = #{existing_ids.to_json};"
  == "var products_json   = #{@filter.data.to_json};"

or:

= %Q{
var all_product_ids = #{existing_ids.to_json};
var products_json   = #{@filter.data.to_json};
}

are there any better solutions for this?

Upvotes: 38

Views: 33500

Answers (7)

Lane
Lane

Reputation: 5006

javascript:
  var isAdmin = "#{current_user.admin? ? 1 : 0}";

Upvotes: 2

Lane
Lane

Reputation: 5006

create a _your_erb_file_contain_javascript_code.erb first

And then in your slim file javascript: part:

#{ conditions ? (render 'your_erb_file_contain_javascript_code') : nil}

Upvotes: 3

Karthik M
Karthik M

Reputation: 191

From https://github.com/slim-template/slim Text Interpolation paragraph

SLIM escapes HTML by default. To avoid the same use #{{content}} for #{content}

Upvotes: 19

Marvin Alejandro Herrera
Marvin Alejandro Herrera

Reputation: 113

I had a similar problem with this. Using the code that others have provided didn't work for me because slim was html escaping my variable. I ended up using Gon. This one is for Sinatra, but they have a gem for Rails as well. Hope it helps others having similar problems.

Upvotes: 3

lidaobing
lidaobing

Reputation: 1075

javascript:
  var all_product_ids = #{raw existing_ids.to_json};
  var products_json   = #{raw @filter.data.to_json};

Upvotes: 21

stonean
stonean

Reputation: 1228

In Slim

javascript:
  var all_product_ids = "#{existing_ids.to_json}";
  var products_json   = "#{@filter.data.to_json}";

Upvotes: 85

Vlad Khomich
Vlad Khomich

Reputation: 5880

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

Upvotes: 10

Related Questions