slim-lang's if-else nested code

Question

I want to assign a css class to a part of HTML based on condition in slim-lang

I am doing the following

- if current_user
  .title
- else
  .title_else

Now how can i write the HTML that should be nested in the one of the class above? Do i need to write HTML in the both if condition and else condition ?

The reason is that the HTML that should be nested in one of the above class should be further intended rightwards. But if i intend it further right, it is including under else condition. How shoule i approach this now ?

Tiago Franco · Accepted Answer · 2015-02-16 17:13:09Z

35

Here's a one liner:

.thing class=(current_user ? 'large-menu' : 'medium-menu')
  h4 Same content, different class

edited Feb 16, 2015 at 17:13

answered Apr 11, 2013 at 13:44

Tiago Franco

1,01610 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

originalhat Over a year ago

Very nice. Interpolation isn't needed. .thing class=(true ? 'large-menu' : 'medium-menu')

Community · Accepted Answer · 2017-05-23 12:34:45Z

20

Since you're just toggling between two attributes, Tiago Franco's answer is certainly sufficient for your purposes. However, there is another way that comes in handy.

You can use capture to render HTML to a local variable, and then embed that content inside whatever control structure you like. So, if your wrapping content was a bit more complex, you'd do this:

- shared_content = capture do
  div This is displayed regardless of the wrapper
- if current_user
  | You're logged in!
  .title
    = shared_content
- else
  | You're not logged in!
  .title_else
    = shared_content

I'll often use this to wrap content in a link if there's a URL available:

- image = capture do
  img src=image_url
- if url.blank?
  = image
- else
  a href=url = image

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jan 9, 2015 at 21:07

Craig Walker

52.1k58 gold badges156 silver badges212 bronze badges

Comments

PhilG · Accepted Answer · 2013-01-13 13:24:14Z

3

1) Yes, you need to write HTML into both of the created divs since you want it to be different. If you didn't want it to be different there would be no need for an if statement!

2) I didn't really understand your point, but this code worked perfectly fine with me:

- if true
  .title
    h4 True is true!
- else
  .title_else
    h4 True is not true!

This code showed a div with a class of .title and a h4 with the text True is true! inside it.

EDIT: Okay now I see what you mean! It is NOT possible to do something like this because it won't render the h4!

- if true
  .title
- else
  .title_else

    h4 Same content, different class

I would recommend you to write a helper which allows you to render partials and then just render that partial from inside both conditions. This means you only have to write that one partial and call it twice.

- if true
  .title
    = render 'footer'
- else
  .title_else
    = render 'footer'

edited Jan 13, 2013 at 13:24

answered Jan 11, 2013 at 11:28

PhilG

1,3331 gold badge9 silver badges18 bronze badges

1 Comment

nik7 Over a year ago

my question i have the same block of code for both if block and else block. I just want to apply a different class based on the condition. Is there a better way to avoid the repetition of code ?

Collectives™ on Stack Overflow

slim-lang's if-else nested code

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related