Marko JS 模板中的条件 class

Question

我正在使用 layout 标签库 将页面扩展 到它的模板，但我不知道如何将变量传递到主布局并应用条件 class.

考虑到这是我的 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>

这是我的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>

最后这是我用来呈现页面和传递标题数据的代码

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

我如何在 main-layout.marko 文件上创建条件 class，在 active 或 inactive 之间切换取决于页面标题？

谢谢

Answer 1

您可以通过向 <layout-use> 标记添加额外的属性来将数据传递到布局。参见：marko-layout » Layout Data

对于您的示例，以下将起作用：

在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>

在registration.marko中：

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

这应该可以解决您的问题，但如果您仍然卡住，请告诉我。

Answer 2

还有另一种将数据传递到其所有模板的方法，即使用您传递数据的 $global 。

并且在使用 global 之后，您不需要向任何标签添加属性。您可以使用 like 来访问它 out.global.username

Marko JS 模板中的条件 class

Conditional class in Marko JS Template

node.js

template-engine

marko