Codepen pug и данные из javascript

#pug #javascript-objects #codepen

#pug #javascript-объекты #codepen

Вопрос:

Я пытаюсь использовать Codepen для некоторого прототипирования.

Я не могу понять, как получить javascript объект в pug template .

  • Объект
 const User = {
  name: 'TrasherDK',
  auth: {
    login: 'trasherdk',
    token: 'sha512'
  },
  validated: 1
}
  
  • Шаблон
    nav_section_right
    if (! User.validated)
       nav_item_glyph("#register", "user", " Sign Up")
       nav_item_glyph("#login", "log-in", " Log in")
    else
       nav_item_glyph("#profile", "user", "#{User.name}")
  

Это дает мне Cannot read property 'validated' of undefined

Затем я добавил script const User = #{User} в начало pug template .

Это также дает мне Cannot read property 'validated' of undefined

Затем я добавил функцию для javascript

 function getData() {
  return User;
}
  

и изменил pug template на:

 script const User = #{getData()};
  

Что, в свою очередь, приводит к getData is not a function .

На этом этапе у меня закончились идеи, которые можно попробовать. Google тоже не помог.

Комментарии:

1. Я знаю, что @sean на правильном пути, но…

Ответ №1:

Панель javascript в Codepen предназначена только для javascript на стороне клиента. У Pug нет доступа к нему при компиляции. Если вы хотите использовать объект JSON в своем Pug в Codepen, вам нужно будет добавить его в панель Pug / HTML в качестве переменной над другим вашим кодом, который ссылается на него.

Лучший способ сделать это — добавить его в виде блочного небуферизованного кода, где вы добавляете дефис и отступ для кода под ним:

 -
  const User = {
    name: 'TrasherDK',
    auth: {
      login: 'trasherdk',
      token: 'sha512'
    },
    validated: 1
  }

// the rest of your pug code goes here
  

Комментарии:

1. Это единственный способ сделать это в Codepen pen.

2. Я знаю, что @sean на правильном пути, но… Я хотел бы запустить свои материалы в js перед pug.render… но я думаю, вы не можете иметь все это..

3. Опять же, в Codepen это невозможно.