Codepen哈巴狗和来自javascript的数据

Question

我正在尝试使用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。

在这一点上，我没有想法尝试。谷歌也没有帮助。

Answer 1

Codepen中的JavaScript窗格仅适用于客户端javascript。编译时，Pug无法访问它。如果要在Codepen上的Pug中使用JSON对象，则需要将其作为变量添加到Pug / HTML窗格中，高于引用它的其他代码。

执行此操作的最佳方法是将其添加为block unbuffered code，在其中添加连字符并缩进其下方的代码：

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

// the rest of your pug code goes here