2

问题

我想在我的 Eleventy 网站上添加一点客户端 JavaScript。我似乎无法document.使用 Eleventy 访问，这意味着我无法访问元素并收听它们的事件。不起作用的示例：

const formElement = document.querySelector("form")

我从 Eleventy 收到的错误消息：

ReferenceError: document is not defined

问题

我如何使用 Eleventy 来监听文档元素更改并进行页面更改？

例子：

formElement.addEventListener("change", function () {
    // Update nearby paragraph element based on form value
});

我的真实场景：我想要一个段落元素显示哪个form'sinput type="radio"具有 value checked。

到目前为止的接近

我在 /data 中有一个名为 fruits.json 的文件：

{
  "items": [
    {
      "name": "Apple"
    },
    {
      "name": "Banana"
    },
    {
      "name": "Strawberry"
    },
    {
      "name": "Mango"
    },
    {
      "name": "Peach"
    },
    {
      "name": "Watermelon"
    },
    {
      "name": "Blueberry"
    }
  ]
}

/_includes/layouts 中的 HTML 文件基于我的 base.html 文件：

{% extends "layouts/base.html" %}

{% block content %}

<form>
 {% for item in fruits.items %}
 {# Create a radio button for each, with the first one checked by default #}
 <input type="radio" name="screen" id="{{ item.name | slug }}" value="{{ item.name | slug }}" {% if loop.index === 1 %} checked {% endif %}>
    <label for="{{ item.name | slug }}">{{ item.name }}</label>
 {% endfor %}

{% set selectedFruit = helpers.getSelectedFruit() %}
<p>Currently selected item from above is: {{ selectedFruit }}</p>
</form>

{% endblock %}

请注意，调用的变量selectedFruit被分配给辅助函数：

{% set selectedScreen = helpers.getSelectedScreen() %}

该getSelectedScreen()函数如下所示：

getSelectedScreen() {
    const formEl = document.querySelector("form")
    console.log(formEl)
}

除了无法使用之外.document，我觉得这种方法可能在其他方面与 Eleventy 静态站点生成器的“格格不入”：

  • 该脚本被称为中间文档
  • 该脚本是一次性的并且远离其上下文

我想知道我是否首先解决了这个错误，或者我是否只需要做一些事情来允许.document访问。

4

1 回答 1

4

这里有一些误解——你的 JavaScript 代码最重要的区别是它是在构建时执行还是在客户端在运行时执行。

Eleventy 核心以及您的.eleventy.js配置文件是用 JavaScript 编写的，它在构建步骤中执行一次，即在生成静态站点时。这发生在 NodeJS 环境中，而不是在浏览器中，这就是为什么没有document变量和 DOM 的原因。

如果您想动态更改站点上的某些内容以响应用户交互，则需要编写一个单独的 JavaScript 文件，该文件将复制到静态站点的输出目录中。然后，您可以将它包含在静态站点的 HTML 模板中，以便在部署站点后的正常页面访问期间包含它。

首先，修改您的模板，只为您的 JavaScript 函数生成一个占位符元素，以便稍后添加文本：

{% extends "layouts/base.html" %}

{% block content %}

<form id="fruits-form">
 {% for item in fruits.items %}
 {# Create a radio button for each, with the first one checked by default #}
 <input type="radio" name="screen" id="{{ item.name | slug }}" value="{{ item.name | slug }}" {% if loop.index === 1 %} checked {% endif %}>
    <label for="{{ item.name | slug }}">{{ item.name }}</label>
 {% endfor %}

  <p id="selected-fruits-output"></p>
</form>

{% endblock %}

然后，创建一个对表单上的更改事件做出反应的 JavaScript 文件：

// fruit-form.js
const fruitForm = document.getElementById('fruits-form');
const formOutput = document.getElementById('selected-fruits-output');
fruitForm.addEventListener('change', e => {
    // update the formOutput with the list of selected fruits
});

现在您需要确保使用Passthrough file copy将此 javascript 文件复制到您的输出目录：

eleventyConfig.addPassthroughCopy("path/to/fruit-form.js");

最后，确保在 HTML 模板中包含 script 元素（确保路径是上面指定的输出的绝对路径）：

{# layouts/base.html #}
<script src="/path/to/fruit-form.js" defer></script>

现在它应该按预期工作。通常，请确保了解构建时 JavaScript 和运行时 JavaScript 之间的区别，以便您可以决定哪种方式在不同情况下效果最好。

于 2020-11-24T11:23:56.120 回答