LoginSignup
132
129

More than 5 years have passed since last update.

html.erbファイルでjs直書きでその中にrubyのコードを埋め込んでいる状態のものをslimに置き換えるときの書き方

Last updated at Posted at 2014-11-27

jsをslimで書く場合

htmlファイル内にjsを書いちゃっている場合(それって良くないんじゃね?って議論は置いといて)、
slimで書くと以下のようになります。

sample.html.erb
<script>
  $(function(){
    ・・・
  });
</script>

    ↓

sample.slim
javascript:
  $(function(){
    ・・・
  });

js内にrubyのコード書いちゃってる場合

データが数字の場合

sample.html.erb
<script>
  $(function(){
    var user_id = <%= @user.id %>;
  });
</script>

    ↓

sample.slim
javascript:
  $(function(){
    var user_id = #{@user.id};
  });

データが文字列の場合

文字列の場合は .to_json しないとなぜかsyntax errorになる。
エスケープ文字が含まれている可能性があるので raw をつけておくと良い。

sample.html.erb
<script>
  $(function(){
    var user_name = <%= @user.name %>;
  });
</script>

    ↓

sample.slim
javascript:
  $(function(){
    var user_name = #{raw @user.name.to_json};
  });

変数名にrubyのコード使っちゃってる場合

eval で実行する。

sample.html.erb
<script>
  $(function(){
    var user_info_<%= @user.id %> = new userInfo();
  });
</script>

    ↓

sample.slim
javascript:
  $(function(){
    var user_id = #{@user.id};
    eval("var user_info_" + user_id + "= new userInfo();");
  });

each doで繰り返しちゃってる場合

一回データを変数に入れてから for で繰り返す。

sample.html.erb
<script>
  $(function(){
    <% @users.each do |user| %>
      var user_info_<%= user.id %> = new userInfo();
      user_info_<%= user.id %>.openMoreInfo();
      user_info_<%= user.id %>.closeMoreInfo();
    <% end %>
  });
</script>

    ↓

sample.slim
javascript:
  $(function(){
    var users = #{raw @users.to_json};
    for(var i = 0; i < users.length; ++i) {
      eval("var user_info_" + users[i].id + " = new userInfo();");
      eval("var user_info_" + users[i].id + ".openMoreInfo();");
      eval("var user_info_" + users[i].id + ".closeMoreInfo();");
    }
  });

途中で条件分岐しちゃってる場合

sample.html.erb
<% if @user.logined? %>
  <script>
    $(function(){
      <% if @user.gender == "female" %>
        console.log("I love you!");
      <% else %>
        console.log("I hate you!");
      <% end %>
    });
  </script>
<% end %>

    ↓

sample.slim
- if @user.logined?
  javascript:
    $(function(){
      var message = "#{@user.gender == 'female' ? 'I love you!' : 'I hate you!'}";
      console.log(message);
    });
    }
  });
132
129
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
132
129