Haml::SyntaxError at / 非法嵌套：内容不能与 %li 在同一行给出并嵌套在其中

Question

我正在使用 sinatra 并遵循本教程 here 并尝试使用 HAML 重写此代码：

<form action="/task/create" method="POST">
<input type="text" name="name" id="name">
<input type="submit" value="Add Task!"/>
</form>

<h2>Tasks:</h2>
<% unless @tasks.empty? %>
<ul>
<% @tasks.each do |task| %>

<li <%= "class=\"completed\"" if task.completed_at %>>
<a href="/task/<%=task.id%>"><%= task.name %></a>
</li>
<% end %>
</ul>
<% else %>
<p>No Tasks!</p>
<% end %>

这是我的 HAML 代码：

%form{action: "/task/create", method: "POST"}
%input{type: "text", name: "name", id: "name"}
%input{type: "submit", value: "Add Task!"}
%h2 Tasks:
- unless @tasks.empty?
%ul
  - @tasks.each do |task|
    %li= "class=\"completed\"" if task.completed_at 
      %a{href: "/task/#{task.id}"}= task.name
- else
%p No Tasks!

当我尝试查看页面时出现以下错误：

Haml::SyntaxError at / Illegal nesting: content 不能与 %li 在同一行给出并嵌套在其中。

对此的任何帮助都会很棒。

伊沃

Answer 1

您遇到了几个问题。首先你的if task.completed_at 需要被抬起，这样它就包含了li 和anchor 标签；正如你所拥有的，它只适用于 li。

第二个问题是您没有正确声明您的班级。在 HAML 中，元素类最好用点符号来声明。

%li.your_class_name_here

您也可以像这样声明您的类。

%li{:class => "class_name_here"}

这两种方法中的任何一种都会创建一个不包含内容的空元素，因此可以将内容元素嵌套在其中，就像您尝试使用锚标记一样。

一旦你使用了等号，你就声明了元素的内容，HAML 将不会处理同一个元素上的嵌套内容；这基本上就是你告诉它用这条线做的事情

%li= "class=\"completed\""

本质上这是对 HAML 说的，创建一个 li 元素并将 class="completed" 作为该元素的内容...

下面我提供了一个你想要完成的工作示例。

%form{action: "/task/create", method: "POST"}
%input{type: "text", name: "name", id: "name"}
%input{type: "submit", value: "Add Task!"}
%h2 Tasks:
- unless @tasks.empty?
  %ul
    - @tasks.each do |task|
      - if task.completed_at
        %li.completed
          %a{href: "/task/#{task.id}"}= task.name
- else
  %p No Tasks!