标记 a 从 erb 到 Haml

Question

我在 haml 中有下一个代码，显示错误：显示 /home/ubuntu/workspace/app/views/layouts/application.html.haml 其中第 24 行出现：非法嵌套：内容不能同时在与 %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 &copy; #{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"

given on the same line as %a and nested within it

该错误基本上意味着 HAML 将 .dropdown-toggle 和 { 之间的 space 视为 link 标签的 "content"。

当您随后在下面的行中声明 = current_user 时，会混淆在 link

的 "content" 中显示哪一个

关于您的错误，以下是我设置页面格式的方式：

!!!
%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 &copy; #{Time.now.year}

一些建议：

您不需要声明 %div - 只需使用 .css_class 它会自动创建一个 div
HAML 基本上就像一个巨大的 markdown 脚本 - 它以不同的方式处理代码中的每个细微差别。对于 inline 与 nested 内容尤其如此。

如果是单行，不需要嵌套内容:

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

如果你有多行，你需要保持你的初始代码没有 spaces:

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

Answer 2

将第 23 行更改为

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

标记 a 从 erb 到 Haml

Tag a from erb to Haml

ruby-on-rails

haml