2014-07-24

slimについて

slim3日目その3

ん？？って思った事

リンク

例1:

a href='#{new_shop_path}'
hoge

出力結果:

<a href="/shops/new"><hoge></hoge></a>
hogeがタグだと思われてしまったため、画面にはなにも表示されない。

例2:
      a href='#{new_shop_path}'
       |hoge
出力結果：

<a href="/shops/new">hoge</a>
パイプを使用しないといけないのか。

例３：
      a href='#{new_shop_path}'
        ほげ
出力結果：

<a href="/shops/new"><ほげ></ほげ></a>
画面には

<ほげ>が表示される。

例４：a href='#{new_shop_path}'ほげ

出力結果:
<a href="/shops/new">ほげ</a>

これはうまくいく

例５：
      a> href='#{new_shop_path}'ほげ
      a> href='#{new_shop_path}'ほげ
出力結果:

<a href="/shops/new">ほげ</a> <a href="/shops/new">ほげ</a>
「a>」とするとaタグとaタグの間にスペースが入れられる。

例６：
      a< href='#{new_shop_path}'ほげ
      a< href='#{new_shop_path}'ほげ
出力結果：

<a href="/shops/new">ほげ</a> <a href="/shops/new">ほげ</a>
「a<」は前にスペースを入れる。

例７：
      a<> href='#{new_shop_path}'ほげ
      a<> href='#{new_shop_path}'ほげ
出力結果：

<a href="/shops/new">ほげ</a> <a href="/shops/new">ほげ</a>
「a<>」は前後にスペースを入れる。

こんな感じで簡単にかける。
例8：
      ul
        li.first: a href="/a" A リンク
        li: a href="/b"
          article.item-box
            |ほげ
出力結果：

<ul>
<li class="first">
<a href="/a">A リンク</a>
</li>
<li><a href="/b"><article class="item-box">ほげ</article></a>
</li>
</ul>

2014-07-24

slimについて

3日目その2

出力 `=`

イコールはバッファに追加する出力を生成する Ruby 呼び出しを Slim に命令する。

複数行に渡る場合、「\」を付ける

例

= javascript_include_tag \
'bootstrap/bootstrap.min',
'data-turbolinks-track' => true

行末がカンマ , で終わる場合 (例関数呼び出し) には行末にバックスラッシュを追加する必要はありません。行末スペースを追加するために修飾子の > や < もサポートします。

=> は末尾のスペースを伴った出力をします。末尾のスペースが追加されることを除いて, 単一の等合 (=) と同じです。古い構文の =' も同様にサポートされます。
=< は先頭のスペースを伴った出力をします。先頭のスペースが追加されることを除いて, 単一の等号 (=) と同じです。

2014-07-24

slimについて

slim3日目

制御コード `-`

「-」は制御コードを意味する。

例としては、each文、if文、for文などがある。

endはない

変数の中身は#{}で囲う=>例：#{user.name}

if文の場合

    - if @hoge.present?
      | 在庫なし
    - else
      | 在庫あり

each文の場合

- @hoge.each_with_index do |h,i|
|#{h[i]}

2014-07-23

slimについて

二回目、今日覚えた事を書きます。

javascript_include_tagをslimで場合

= javascript_include_tag 'jquery-1.10.2.min'

html

[if lt IE 9]をslimでの場合
    /[if lt IE 9]
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>



改行をslimでの場合
      |この行は左端になります。
      br
      |この行はスペース1つを持つことになります。

2014-07-21

rails slimを使用してみた。

slimって？

Slim は Rails3 および 4 に対応した高速, 軽量なテンプレートエンジン

gemをインストールして使ってみた。

とりあえずrailsで良く使うヘルパーを使用してslimを使用してみます。1.link_toを使用した場合

= link_to 'New Shop', new_shop_path

結果：<a href="/shops/new">New Shop</a>

2.link_toとimage_tagを使用た場合

= link_to(image_tag('aaa.jpg', class:'im1'), new_shop_path)

結果：a href="/shops/new"><img class="im1" src="/assets/aaa.jpg" alt="Aaa"></a>

3.render partialを使用した場合

= render partial: "aaa"

結果：部分テンプレートaaaの中身が表示される。

4.each文の書き方

- @shops.each do |shop|
p shop.id
p shop.name

出力 =

制御コード -

出力 `=`

制御コード `-`