Handlebars：html 在控制台中打印但不呈现答案

【问题标题】：Handlebars: html prints in console but does not renderHandlebars：html 在控制台中打印但不呈现
【发布时间】：2020-06-23 04:53:46
【问题描述】：

我正在构建一个关于快递和车把的应用程序。我试图让用户输入一个搜索词，然后触发以下内容：

搜索词被传递到我服务器上的路由
该路由通过 axios 调用外部 API
数据返回，把手将其呈现到“搜索结果”页面上。

Handlebars 正在接收数据并制作一个完美的 html 文档，然后由于某种原因，它不会在浏览器窗口中呈现。但是，如果我打开浏览器的开发工具，转到“网络”，单击请求，然后“预览”，我会看到我想要呈现的页面。我怀疑我将车把 res.render 指向错误的方向，但我不知道如何修复它。

我将search.js 文件链接到为用户提供搜索栏的 html 页面：

$(document).ready(function() {
  $("#searchButton").on("click", function() {
    const query = $("#recipeSearch")
      .val()
      .trim();
    const search = { searchTerm: query };

    $.ajax({
      url: "/api/search",
      method: "POST",
      data: search
    }).then(result => console.log(result));
  });
});

然后在我的路线中，我有一个这样定义的发布路线：

app.post("/api/search", function(req, res) {
    let searchTerm = req.body.searchTerm;
    let apiKey = process.env.SPOON_APIKEY;
    let queryUrl = `https://api.spoonacular.com/recipes/search?query=${searchTerm}&apiKey=${apiKey}`;

    axios.get(queryUrl).then((results) => {
      // then render the retrieved data to a handlebars page
      res.render("search-results", { recipes: results.data.results });
    });
  });

车把文件：

views/
  search-results.handlebars
  layouts/
    main.handlebars

搜索结果包含以下内容：

<ul>
  {{#each recipes }}
  <li>{{this.title}}</li>
  {{/each}}
</ul>

在浏览器开发工具中，结果如下所示： https://imgur.com/NTdDYvy.png

我错过了什么？如果您需要更多信息，请告诉我。谢谢！

【问题讨论】：

您是否从某个地方复制了这段代码？我问，因为很清楚为什么您的代码会记录到控制台。这是您对数据所做的唯一事情。我也没有看到任何与车把相关的代码。
没有复制，没有。但基于我根据教程构建的更简单的车把应用程序。
显示其余代码。
您的服务器无法直接控制客户端已渲染的状态。除非您向客户端添加一些代码来解释服务器响应并做出相应的响应，否则不会。虽然这可能不适用于 WASM，但它就在这里。所以你提出了你的ajax请求；服务器已经渲染了页面。您需要在前端实现 MVC 结构以干净的方式处理数据，或者您只需要直接从 ajax 请求中注入服务器呈现的 html。
由于您使用的是 jQuery，最后一个示例可以通过简单的方式完成：.then(result => $("#target-container").html(result)); 为了更好地处理数据，我建议您研究 VueJS、React 或 Angular/AngularJS。为了记录，这些都是高级框架，但它们倾向于以比直接覆盖 html 更简洁的方式处理数据。

标签： javascript express handlebars.js

【解决方案1】：

我有同样的问题，总而言之，我相信（我可能是错的）解决这个问题并仍然实现这一目标的方法是使用 res.send() 而不是 res.render() 将您的数据发送到您的前端，注册来自前端的部分，然后在前端渲染数据。我会告诉你这是怎么回事...

【讨论】：