不要なHTML（フェニックス）をレンダリングする列挙割り当て

Question

私は、独自の色とサイズのサーバーを介して50個のランダムな四角形のdivを動的に生成するPhoenixテンプレートを持っています。これを行うために、私はループを実行し、1-100の乱数を割り当て、その数に対して演算を実行します。

ランダムクラスにインラインで<div class="<%=Enum.random(['class-1','class-2'...]) %>"のようなものを割り当てるだけで、外部変数を参照したいとしましょう。

マイテンプレートコードは次のようになります。

<section id="my-section"> 
    <%= for x <- 1..50 do %> 
    <%= myrandom = Enum.random(1..100) 

     colorClass = cond do 
      myrandom < 2 -> 
      "color-red" 
      myrandom < 10 -> 
      "color-orange" 
      myrandom < 25 -> 
      "color-yellow" 
      myrandom < 50 -> 
      "color-green" 
      true -> 
      "color-blue" 
     end 

     sizeClass = cond do 
      rem(myrandom, 5) == 0 -> 
      "size-1" 
      rem(myrandom, 5) == 1 -> 
      "size-2" 
      rem(myrandom, 5) == 2 -> 
      "size-3" 
      rem(myrandom, 5) == 3 -> 
      "size-4" 
      rem(myrandom, 5) == 4 -> 
      "size-5" 
     end 
    %> 
    <div class="square <%=colorClass %> <%=sizeClass %>"></div> 
    <% end %> 
</section> 

結果のHTMLは次のようになります。

<section id="my-section"> 
    size-3 
    <div class="square color-yellow size-3"></div> 
    size-2 
    <div class="square color-blue size-2"></div> 
    size-3 
    <div class="square color-blue size-3"></div> 
    size-4 
    <div class="square color-blue size-4"></div> 
    ... 

divが生成される前に何とかsizeClass変数は、インラインでレンダリングされています。副作用なしにこれを行うにはどうすればよいですか？

Answer 1

大きなコードブロックの周囲に<%=を使用しているため、コードブロックによって返された値がHTMLに挿入され、最後の式の値が返されます。これはsizeClass 。あなたが<%に<%=を変更することにより、それを修正することができます：

<% 
    myrandom = Enum.random(1..100) 

    colorClass = ... 

    sizeClass = ... 
%> 

---

をまた、あなただけのこれにsizeClass割り当てを書き換えることができます。

sizeClass = "size-#{rem(myrandom, 5) + 1}" 

そして、あなたはおそらくすでにそれを知っているが、それはすることをお勧めしますそのような大規模なコードブロックをテンプレートの代わりにビューに配置します。このコードをビュー内の関数に移動することができます。