Conditional class in Marko JS Template

Question

I am using the layout taglib to extend a page to its template but i don't know how to pass a variable to the main layout and apply a conditional class.

Considering this is my main-layout.marko

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body class="#### (TITLE === 'REGISTER')?'ACTIVE':'INACTIVE' ####">
    <layout-placeholder name="title"/>
    <layout-placeholder name="body"/>
  </body>
</html>

this is my registration.marko

<layout-use template="./layout.marko">
    <layout-put into="title">
      $data.title
    </layout-put>
    <layout-put into="body">
      some content
    </layout-put>
</layout-use>

and finally this is the code I use to render the page and pass the title data

router.get('/register', function(req, res, next) {
  registration.render({
    title: 'register'
  }, res);
});

How can I create a conditional class on the main-layout.marko file that switches between active or inactive depending on the page title?

Thanks

score 3 · Accepted Answer · answered Jan 11 '16 at 18:06

3

You can pass data to a layout by adding additional attributes to your <layout-use> tag. See: marko-layout » Layout Data

For your example, the following will work:

In main-layout.marko:

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body class="#### ${data.title === 'REGISTER' ? 'ACTIVE' : 'INACTIVE' } ####">
    <layout-placeholder name="title">
      ${data.title}
    </layout-placeholder>
    <layout-placeholder name="body"/>
  </body>
</html>

In registration.marko:

<layout-use template="./layout.marko" title="${data.title}">
    <layout-put into="body">
      some content
    </layout-put>
</layout-use>

That should solve your problem, but let me know if you are still stuck.

answered Jan 11 '16 at 18:06

Patrick Steele-Idem

457
2
5

It surely works thanks! What's the difference between the ternary condition you wrote and this one `{?data.title === 'register';active;inactive}` ? – crash Jan 12 '16 at 15:26
Good question, @crash. They compile down to the same thing so it is only syntax difference. See: http://markojs.com/try-online/#Conditionals_Shorthand_Conditionals When using the `{? ... }` syntax, the alternative clause is optional unlike with a JavaScript ternary conditional. In the next major version of Marko we plan on dropping support for the custom Marko `{? ... }` syntax to simplify the language and to be closer to JavaScript. In Marko v3, an attribute value will always be a valid JavaScript expression. See: https://github.com/marko-js/marko/issues/90 – Patrick Steele-Idem Jan 12 '16 at 23:36

score -2 · Answer 2 · answered Oct 18 '16 at 03:58

there is another way of passing data t all of its template that is using $global in which you are passing your data .

and after using global you dont need to add attribute to any tag . you can access it by using like out.global.username

Conditional class in Marko JS Template

2 Answers2