标记 a 从 erb 到 Haml

Question

我在 haml 中有下一个代码，显示错误：Showing /home/ubuntu/workspace/app/views/layouts/application.html.haml where line #24 raise: Illegal nesting: content can't be both与 %a 位于同一行并嵌套在其中。

第 24 行是 = current_user.name haml代码有什么问题？

!!!
%html
  %head
    %title Chat
    = stylesheet_link_tag
    = javascript_include_tag
    = csrf_meta_tags

  %body
    %div.navbar.navbar-default.navbar-static-top
      .container   
        .navbar-header
          = link_to 'Chat', root_path, class: 'navbar-brand'

      .navbar
        %ul.nav.navbar-nav
          %li
            = link_to 'Home', root_path

        %ul.nav.navbar-nav.pull-right
          - if user_signed_in?
            %li.dropdown
              %a.dropdown-toggle {"data-toggle": "dropdown", href: "#"}
                = current_user.name    
              %ul.dropdown-menu {role: "menu">
                %li
                  = link_to 'Profile', edit_user_registration_path
                %li 
                  = link_to 'Log out', destroy_user_session_path, method: :delete
          - else
            %li
              = link_to 'Log In', new_user_session_path
            %li
              = link_to 'Sign Up', new_user_registration_path


    .container
      = flash.each do |key, value|
        %div.alert.alert-"#{key}"
          = value

      = yield

  %footer  
    %p Copyright © #{Time.now.year}

Answer 1

尝试以下方法：

%a.dropdown-toggle{data-toggle: "dropdown", href: "#"} = current_user.name

或者，您应该调用 Rails 的 link_to 助手以使其正常工作：

= link_to current_user.name, "#", data: {toggle: "dropdown"}, class: "dropdown-toggle"

---

与 %a 位于同一行并嵌套在其中

该错误基本上意味着 HAML 将您在 .dropdown-toggle 和 { 之间的空间视为链接标签的“内容”。

当您随后在下面的行中声明= current_user 时，对于在链接的“内容”中显示哪个感到困惑

---

关于您的错误，这是我将如何格式化页面：

!!!
%html
  %head
    %title Chat
    = stylesheet_link_tag
    = javascript_include_tag
    = csrf_meta_tags

  %body
    .navbar.navbar-default.navbar-static-top
      .container   
        .navbar-header
          = link_to 'Chat', root_path, class: 'navbar-brand'

      .navbar
        %ul.nav.navbar-nav
           %li= link_to 'Home', root_path

        %ul.nav.navbar-nav.pull-right
          - if user_signed_in?
            %li.dropdown
              = link_to current_user.name, "#", data: {toggle: "dropdown"}, class: "dropdown-toggle"
              %ul.dropdown-menu{data-role: "menu"}
                 %li= link_to 'Profile', edit_user_registration_path
                 %li= link_to 'Log out', destroy_user_session_path, method: :delete
          - else
            %li= link_to 'Log In', new_user_session_path
            %li= link_to 'Sign Up', new_user_registration_path


    .container
      = flash.each do |key, value|
        .alert.alert-"#{key}" = value
      = yield

  %footer  
    %p Copyright © #{Time.now.year}

一些提示：

1. 您无需声明%div - 只需使用.css_class，它会自动创建div

2. HAML 基本上就像一个巨大的markdown 脚本——它以不同的方式处理代码中的每一个细微差别。对于 inline 与 nested 内容尤其如此。

如果你只有一行，你不需要嵌套内容：

.alert.alert-"#{key}"= value

如果你有多行，你需要保持你的初始代码没有空格：

%ul.dropdown-menu{data-role: "menu"}
   = #this can be nested

Answer 2

将第 23 行更改为

%a.dropdown-toggle{"data-toggle": "dropdown", href: "#"}