单击索引时将参数传递到模板文件答案

【问题标题】：Pass a parameter into a template file when an index is clicked单击索引时将参数传递到模板文件
【发布时间】：2020-11-08 21:18:14
【问题描述】：

我有一个从 JS 文件中的一些 JSON 填充的表。

data.js 看起来像这样：

var data = [
  {
    title: "Avengers Endgame Trailer",
    year: 2019,
    type: "MOV",
    file: "video1.mp4"
  },
  {
    title: "Avengers Infinity War Poster",
    year: 2018,
    type: "PNG",
    file: "image1.png"
  }
];

数据是在我的functions.js文件中的一个JS函数中读取的（它写入实际的表行）。

function populateTable() {
  for (var i = 0; i < data.length; i++) {
    if (data[i].type == "MOV") {
      var row = '<tr><td><a href="video.html?=' + data[i].file + '">' + data[i].title + "</a></td>";
      row += "<td>" + data[i].year + "</td></tr>";
      $("#contents").append(row);
    } else {
      var row = '<tr><td><a href="image.html?=' + data[i].file + '">' + data[i].title + "</a></td>";
      row += "<td>" + data[i].year + "</td></tr>";
      $("#contents").append(row);
    }
  }
}

我想弄清楚的是如何允许每个项目的链接关闭以使用不同的模板文件。我在上面的 HREF 中写了一些虚拟代码，但这显然是不正确的。

对于模板，我有两个：video.html 和 image.html。我想将作为参数点击的索引的文件名传递到模板文件中，以便它可以显示正确的文件，但我不确定该怎么做？

例如，video.html 模板文件如下所示：

<html>
    <body>
        <div class="container">
            <video autoplay muted loop id="main">
              <source src="{filenameGoesHere?}" type="video/mp4">
              Your browser does not support HTML5 video.
            </video>
        </div>
    </body>
</html>

【问题讨论】：

标签： javascript json object parameters

【解决方案1】：

您在此处重复了多项内容，使其未进行优化。如果您可以使用功能，请使用它们！如果没有，更好的方法是：

function populateTable() {
  for (var i = 0; i < data.length; i++) {
    // Look how I have made the file addition here.
    var row = '<tr><td><a href="' + (data[i].type == "MOV" ? "video" : "image") + ".html?=" + data[i].file + '">' + data[i].title + "</a></td>";
    row += "<td>" + data[i].year + "</td></tr>";
    // Do the MOV vs. PNG thing/
    row += "<tr><td>";
    if (data[i].type == "MOV") {
      row += `<div class="container">
            <video autoplay muted loop id="main">
              <source src="${data[i].file}" type="video/mp4" />
              Your browser does not support HTML5 video.
            </video>
        </div>`;
    } else {
      row += `<div class="container">
            <img src="${data[i].file}" alt="${data[i].title}" />
        </div>`;
    }
    row += "</td></tr>";
    $("#contents").append(row);
  }
}

在上面的代码中：

看看我是如何在第 4 行添加文件的。
在第 7 行做 MOV 与 PNG 的事情。

对于使用How to read GET data from a URL using JavaScript?的模板，你可以做的是：

<html>
    <body>
        <div class="container">
            <video autoplay muted loop id="main">
              <source src="" id="src" type="video/mp4" />
              Your browser does not support HTML5 video.
            </video>
        </div>
    </body>
    <script>
        var params = new URLSearchParams(location.search);
        document.getElementById("src").setAttribute("src", params.get('file'));
    </script>
</html>

【讨论】：

谢谢，但我并没有尝试将视频本身添加到表格中，就像您在这里一样，我正在尝试使用两个模板文件之一打开新页面，其中关联文件单击的行的名称可用。
@FuegoDeBassi 知道了。你使用什么样的模板引擎？意义上的开放？您是作为新窗口还是模式窗口打开？您是否使用任何客户端库，例如 React（我不这么认为，因为您使用的是 jQuery），但想澄清一下。
没有模板引擎，我只想将我的 video.html 和 image.html 模板都设置为能够接收参数，然后我想为每个项目提供自定义 href在索引中，例如video.html?=video4.mov 然后让它显示出来。
我希望这些作为新页面打开。
@FuegoDeBassi 你不能有一个无名的参数。你在做?= 这是错误的。你必须有类似?file=filename.mp4的东西。