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

然后我在 pug template 的顶部添加了 script const User = #{User}。

这也给了我 Cannot read property 'validated' of undefined

然后我在javascript

中添加了一个函数

function getData() {
  return User;
}

并将 pug template 更改为：

script const User = #{getData()};

这反过来导致 getData is not a function。

至此我运行出主意去试试。 Google 也没有帮助。

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

Codepen 哈巴狗和来自 javascript 的数据

Codepen pug and data from javascript

javascript-objects

pug

codepen