This implementation uses haml.
Registered users are received at "@ group.users".
It is a program that implements so that the names of users registered in the group are displayed in a list in left-header__members.
I implemented it within the range that I can understand now.
I used each to register multiple users, but could you teach me the exact implementation method ahead of time?

If there are three users registered in the group, Tanaka, Sato, and Suzuki, the following image will be displayed on the browser.

If there is any incomplete information, please let me know.

Current implementation code
          % ul.
          @ group.users.each
          % li = user.name

`` `

  • Answer # 1

    Are there any problems?
    I got the impression that there was no problem in operation.

    If that is not the case, and if you are in trouble because something is not possible, I think that if you do not state that fact, you will not receive an answer.

    To explain just how to modify the implementation code more generally, if you use ul, it will be common to do the following:

    . left-header__members
      % ul
        [email protected] group.users.each do | user |
          % li = user.name

    By doing so, the li tag fits in the ul tag, so the original movement of ul and li will be utilized.

    Important points

    In haml, pay special attention to the number of indents

    When using ruby's method in haml but not displaying it on the screen, add '-' and a space at the beginning of the line

    Useful articles

    How to write Haml


    If you want to maintain the appearance you put on the image, I think that it will be as follows.

    . left-header__members
      [email protected] group.users.each_with_index do | user, i |
        -unless i.zero?
        = user.name

    I'm not really sure if I can put a space after the ',', so I'd like to wait for another answer ...
    I think that it can be done using helper or something, but I didn't list it because I felt that the level had not yet been reached.

Related articles