36

There is a way to put ruby conditions inside javascript block? i.e.

javascript:
  var config = {
      common_value_1 : 1, 
      common_value_2 : 2 
  };
  - if my_value === true # this must be a ruby condition
    config.custom_true_value_1 = "1" ;
    config.custom_true_value_2 = "#{my_value}" ;
  - else
    config.custom_false_value_1 = "1" ;
    config.custom_false_value_2 = "#{my_value}" ;

Or is there another workaround at this problem? Because the ugly way that I can use its:

javascript:
    var config = {
      common_value_1 : 1, 
      common_value_2 : 2 
    };
- if my_value === true # this must be a ruby condition
  javascript:
    config.custom_true_value_1 = "1" ;
    config.custom_true_value_2 = "#{my_value}" ;
- else
  javascript:
    config.custom_false_value_1 = "1" ;
    config.custom_false_value_2 = "#{my_value}" ;

But I don't like it because if config has common values between if and else then I would duplicate my code and would be much larger and hard to maintain.

Updated with better examples

norman784
  • 2,201
  • 3
  • 24
  • 31

3 Answers3

37

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.

Ngoral
  • 4,215
  • 2
  • 20
  • 37
aross
  • 5,620
  • 1
  • 25
  • 32
  • what about if I want to add different keys in each case, I update my question, seems that I don't explain well myself the first time – norman784 Jul 22 '13 at 18:42
24

In pure Slim you don't have raw nor html_safe. In those cases, simply use double curly braces as documented here:

javascript:
  var data = #{{ JSON.dump([{x: 1, y:2}]) }};
fphilipe
  • 9,739
  • 1
  • 40
  • 52
16

You have 2 options:

1. Use a ruby section

This scenario is better for complex code.

I have a ruby object that I want to make a JSON. So, inside my slim file I'll create a ruby section:

ruby:

  myObject = @object.to_json.html_safe

Pay attention to html_safe: it's important to not escape double quotes.

Then you can use myObject inside javascript section:

javascript:

  var data = #{myObject};

2. Use double curly braces

For simple cases, use the double curly braces inside the javascript section, like stated in @fphilipe answer:

javascript:

  var data = #{{@object.to_json}};
Rael Gugelmin Cunha
  • 3,327
  • 30
  • 25