Мопс / Джейд, скрытие / отображение элементов на основе значения флажка - PullRequest
Новая
       23

Мопс / Джейд, скрытие / отображение элементов на основе значения флажка

0 голосов
/ 14 марта 2019

Я работаю с приложением NodeJS, которое использует шаблоны Pug. У меня есть флажок, который я хочу использовать в качестве переключателя для скрытия / отображения других элементов.

Я не могу найти способ сделать это в 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

Я пробовал с:

  • , если input # isHidden
  • если input # isHidden.checked
  • если # isHidden
  • если # isHidden.checked
  • if {#isHidden}
  • if {# isHidden.checked}

Все они дают мне ошибку сервера при рендеринге.

Понятия не имею, что попробовать дальше. Я искал пару часов сейчас, и я не могу его найти. Я немного новичок в интерфейсе и очень плохо знаком с шаблонами, так что я почти уверен, что делаю что-то ужасно неправильно.

Это будет включать в себя некоторые встроенные сценарии?

Любая помощь будет принята с благодарностью.

Спасибо!

1 Ответ

1 голос
/ 14 марта 2019

Pug отлично подходит для быстрой рендеринга HTML на сервере, но это не клиентский движок JavaScript.

Другими словами, если вы хотите, чтобы pug изменял страницу каждый раз, когда пользователь нажимает на флажок, вам нужно отправить ее обратно на сервер для повторного рендеринга. Это не очень хорошее использование серверных ресурсов, но, что более важно, это будет очень плохой пользовательский опыт.

Мопс по-прежнему является отличным способом создания вашей страницы, но вам нужно использовать клиентский JavaScript, чтобы начать работать с флажками так, как вы хотите.

Вот еще один вопрос , который покажет вам, как начать делать это в клиентском JavaScript, если вы выполните поиск по «флажку JavaScript», вы найдете множество других ресурсов, которые помогут вам в дальнейшем.

...