1

我试图做一个不涉及任何特定服务器端技术的最小示例。所以我刚刚用 bash 生成网页并用 cgi 提供它。

$ mkdir example
$ cd example
$ cat > index.html
<meta http-equiv="Refresh" content="0; url='/cgi-bin/index.html'" />

$ mkdir cgi-bin
$ cat > cgi-bin/index.html
#! /usr/bin/env bash

set -e

echo Content-Type: text/html
echo
sed "s/NEW/$RANDOM/g" << EOF
<html>
  <head>
    <title>DEMO</title>
    <script src="/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js"></script>
  </head>
  <body>
    <h1>DEMO</h1>
    <p><small>lucky bonus number: $RANDOM</small></p>
    <turbo-frame id='example-frame'>
        <a href="?NEW">NEW turbo frame</a><br />
        <a href="?NEW" data-turbo-frame="_top">NEW full page</a>
        <p>number in query string: $QUERY_STRING</p>
    </turbo-frame>
    <br />
  </body>
</html>
EOF


$ chmod +x cgi-bin/index.html
$ npm install --save @hotwired/turbo@7.0.1
$ python3 -m http.server --cgi # or whichever server

这将创建一个如下所示的网页：

没有查询字符串的初始页面

然后，当您单击 turbo frame reloader 链接时，您会得到以下信息：

具有更新的查询字符串编号、相同的奖励编号且没有 URL 更改的页面

幸运红利号码没有改变，因为它只加载了turbo frame，但是turbo frame里面显示的查询字符串号已经更新了。

整页 Turbo 链接执行此操作：

带有更新的 url 和更新的幸运奖金号码的页面

它会更新幸运红利号码（turbo 框架之外的内容）并更新 url。（但我确信它工作正常。我已经检查了网络选项卡。它每次只进行一次提取。）

我想做的事：

我想要一个只更新涡轮帧的链接（在我的示例中保持幸运奖金数字不变）但也更新 url。我猜这个用例是如果你有一个始终保持不变的横幅或菜单，但是一个主 turbo 框架，其中包含应该对应于 url 的所有页面特定内容。

所以在这个例子中，我希望看到页面上的查询字符串和实际的查询字符串更新，只留下“幸运奖金号码”不变。

4

1 回答 1

1

这绝对是可能的，尽管它需要对您的实现进行一些实质性的更改。基本上，您需要使用Turbo Streams进行部分页面替换。

  1. 您需要第二个文件来请求，一个具有 Content-Type 的文件text/vnd.turbo-stream.html。
  2. 部分页面重新加载在没有 Javascript 的情况下工作得很好（即在 turbo 框架内更新时保持奖金数字不变），但是如果你想更新 URL，你需要一些 JS。

有关代码的扩展版本，请参阅此要点。下面是最重要的部分，主要是一个新文件template.html。

index.html不变。

网页/cgi-bin/index.html

在这里，我只是更改了链接标签。整页重新加载请求index.html，其中启用 Turbo 的链接请求启用 turbo-streamtemplate.html出于某种原因，我需要在启用 Turbo 的链接上添加 data-turbo=true；在涡轮增压框架内是不够的。 data-turbo-action=replace应该是“替换” URL 中位置值的 HTML 属性。这似乎不像我对 docs所期望的那样。

#! /usr/bin/env bash

set -e

echo Content-Type: text/html
echo
sed "s/NEW/$RANDOM/g" << EOF
<html>
  <head>
    <title>DEMO</title>
    <script src="/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js"></script>
  </head>
  <body>
    <h1>DEMO</h1>
    <p><small>lucky bonus number: $RANDOM</small></p>
    <turbo-frame id='example-frame'>
        <a href="template.html?NEW" data-turbo="true" data-turbo-action="replace">
          NEW turbo frame
        </a><br />
        <a href="index.html?NEW" data-turbo="false">
          NEW full page
        </a>
        <p>number in query string: $QUERY_STRING</p>
    </turbo-frame>
    <br />
  </body>
</html>
EOF

网页/cgi-bin/template.html

这是最重要的一点。您的服务器必须使用turbo-stream标记、操作replace（因为您要替换 HTML 内容）和目标属性设置为您的 turbo-frame 的 id（因为那是您要替换的内容）来响应。

#! /usr/bin/env bash

set -e

echo Content-Type: text/vnd.turbo-stream.html; charset=utf-8
echo
sed "s/NEW/$RANDOM/g" << EOF
<turbo-stream action="replace" target="example-frame">
    <template>
        <turbo-frame id='example-frame'>
            <a href="template.html?NEW" data-turbo="true" data-turbo-action="replace">
              NEW turbo frame
            </a><br />
            <a href="index.html?NEW" data-turbo="false">
              NEW full page
            </a>
            <p>number in query string: $QUERY_STRING</p>
        </turbo-frame>
    </template>
</turbo-stream>
EOF

去测试：

  1. 在浏览器中打开 index.html
  2. 单击“整页”链接，观察奖金号码的变化，查询字符串现在位于 URL 和页面上。你已经得到了这个部分。
  3. 单击“turbo frame”链接，观察奖金数字没有改变，查询字符串在页面上但不在 URL 中。这不是你要求的全部，但它很接近。
  4. 打开 DevTools，在 JS 控制台执行
Turbo.visit(`template.html?${<any number here>}`)
for example:
Turbo.visit(`template.html?${new Date().valueOf()}`)

观察奖金数字没有改变，链接得到新的随机数字，查询字符串在 URL 和页面上都是。您可以反复执行此操作并不断刷新您的涡轮框架。这是你要求的，它似乎需要一些 JS。如果我发现任何其他可以消除对 JS 需求的 html 属性，我会更新我的答案。

于 2021-10-10T19:45:35.217 回答