哈巴狗/翡翠,根据复选框值隐藏/显示元素

时间:2019-03-14 00:29:31

标签: node.js pug serverside-rendering ssr

我正在使用使用Pug模板的NodeJS应用程序。 我有一个复选框,希望用作隐藏/显示其他元素的切换器。

我在Jade / Pug中找不到解决方法。

这就是我所拥有的:

form(method='POST')
    .form-group.row
      label(class='lbl', for='ishidden') Test
      .col-md-8
        input#isHidden(type='checkbox', name="ishidden")
        if *checkbox_checked*
          label(class='lbl') NotHidden

我尝试过:

  • 如果输入#isHidden
  • 如果输入#isHidden.checked
  • 如果#isHidden
  • 如果#isHidden.checked
  • 如果{#isHidden}
  • 如果{#isHidden.checked}

所有这些在渲染时都会给我服务器错误。

我不知道下一步该怎么做。 现在已经搜索了几个小时,但找不到。 我对前端有点陌生,对模板也很陌生,所以我很确定自己做错了什么。

这会涉及一些内联脚本吗?

任何帮助将不胜感激。

谢谢!

1 个答案:

答案 0 :(得分:1)

Pug擅长在服务器上快速呈现HTML,但它不是客户端JavaScript引擎。

换句话说,如果您希望pug每次用户单击复选框时都更改页面,则需要将其发送回服务器以重新呈现。那不是很好地利用服务器资源,但更重要的是,这将是非常差的用户体验。

Pug仍然是一种制作页面的好方法,但是您需要使用客户端JavaScript以所需的方式开始使用复选框。

Here is another question将向您展示如何开始在客户端JavaScript中进行操作,如果您搜索“ JavaScript复选框”,则会发现许多其他资源,它们将为您提供进一步的帮助。