如何将变量从js传递给哈巴狗

Question

我的问题是我似乎无法修改 pug 文件用来循环的变量。

section.p-0.md-p-5.muli
    .flex.flex-wrap
      script.
        var users2 = '#{users}';
        console.log(users2);
        /*
        const searchBar = document.getElementById('searchBar');
        searchBar.addEventListener('keyup', (e) => {
          const search = e.target.value;
          const filteredFiles = users2[0].filter(user => {
            return user.toString[0][0].includes(search);
          })
          console.log(filteredFiles);
        });
        */
      each user in users2
        .w-100pc.md-w-33pc.p-10
          a.block.no-underline.p-5.br-8.hover-bg-indigo-lightest-10.hover-scale-up-1.ease-300.filePage(href=`/${user.slug}`)
            img.w-100pc(src=`${user.photoUrl[0]}` alt='')
            p.fw-600.white.fs-m3.mt-3
              | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed…
            .indigo.fs-s3.italic.after-arrow-right.my-4 3 days ago by Jeff

在第 3 行中，我有一个脚本标记，用于设置传入的对象数组。比我想修改这些对象并将新的过滤数组传递到第 16 行循环。但是，我不知道如何将变量从第 4 行传递到第 16 行。当我运行代码时，我得到错误“无法读取未定义的属性 'length'”。有想法该怎么解决这个吗？谢谢

Answer 1

任何时候，你都必须非常清楚服务器上的内容和客户端上的内容。

服务器（即 Pug）计算并生成 Html 输出。在这个服务器阶段，不存在浏览器。使用的任何变量都是服务器上的变量。

当用户启动浏览器访问您的页面时，上面生成的 Html 输出会被浏览器接收，其中的任何脚本命令都会在浏览器中接收运行。此时不存在Pug

users2 包含在 <script> 块中，是客户端变量。它 不存在 当 Pug 运行ning.

users 是服务器端变量，因此可用于 Pug 代码。

您收到的错误消息可以通过简单的更改来修复：each user in users。

//-Your `users` object is a SERVER variable.

script.
  var users2 = '#{users}';
  console.log(users2);
  //-The above, other than the substitution of #{users}, DO NOT RUN AT THE SERVER

//-The below runs ONLY at the server, thus object `users` is available
section.p-0.md-p-5.muli
  .flex.flex-wrap
    each user in users
      .w-100pc.md-w-33pc.p-10
        a.block.no-underline.p-5.br-8.hover-bg-indigo-lightest-10.hover-scale-up-1.ease-300.filePage(href=`/${user.slug}`)
        img.w-100pc(src=`${user.photoUrl[0]}` alt='')
        p.fw-600.white.fs-m3.mt-3
          | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed…
        .indigo.fs-s3.italic.after-arrow-right.my-4 3 days ago by Jeff

幸运或不幸的是，您没有为客户端变量使用完全相同的名称。它可能使您彻底困惑，也可能使您完全开悟。例如，您可以编写以下内容，它仍然可以正常工作：

script.
  let users = '#{users}';
  console.log(users);

section
  each user in users
    img(src=user.photoUrl[0])

OK，现在根据您的要求修改users。如果您正在考虑让客户端修改它然后返回给 Pug 以使用更新后的值，则不能。浏览器收到 Html 输出后，它断开与服务器的连接。同样，当 Pug 生成 Html 输出时，浏览器并不存在。 Pug 引擎与浏览器的 Javascript 引擎之间的交互为零！

您的客户端代码中注释掉的代码没有显示您要如何修改users。客户端有哪些附加信息要求您在浏览器中而不是在服务器中进行修改？是因为您需要（人类）用户输入吗？你应该 post 另一个问题来描述你想要的浏览器和服务器之间的交互。答案可能需要 Ajax 次调用或提交表单。

如何将变量从js传递给哈巴狗

How to pass variable from js to pug

html

javascript

node.js

pug