Question

我有一个凤凰模板，我通过服务器动态生成50个随机方形div，每个div都有自己的颜色和大小。为此，我运行一个循环，从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>
    ...

在sizeClass生成之前，div变量以内联方式呈现。如何在没有副作用的情况下这样做？

Answer 1

这是因为你在大代码块周围使用<%=，它将代码块返回的值插入到HTML中，并且你的代码块返回最后一个表达式的值，这是值分配给sizeClass。您可以将<%=更改为<%：

来解决此问题

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

  colorClass = ...

  sizeClass = ...
%>

此外，您可以将sizeClass作业重写为：

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

您可能已经知道了，但建议将这些大型代码块放入视图而不是模板中。您可能希望将此代码移动到视图中的函数中。

枚举分配呈现不需要的HTML（Phoenix）

1 个答案: