Express 如何使用hbs进行快速异步搜索渲染？

我正在使用

keyDown

上的事件侦听器进行异步搜索，并在模板中输出数据库中的所有记录，但是如果我控制台记录

jobs

对象，我可以看到它仅根据关键字返回记录

问题是：

Route-search.js（服务器）

search.js（前端）

index.hbs（模板）

---

jobsTemplate

变量不包含原始模板。相反，它包含已呈现的HTML（显示所有记录）。因此，当您尝试使用以下工具渲染新数据时：

const html = Mustache.render(jobsTemplate, {jobs});

jobsTemplate

实际上不是一个模板。它已经呈现为HTML。所以handlebar没有找到模板指令，只是返回原始内容不变。然后尽职尽责地将未更改的内容插入页面，搜索查询结果将永远不会显示

---

要使用客户端渲染，必须确保客户端可以访问原始的未修改的把手模板。这通常涉及将模板包含在HTML页面中，使其在交付给客户机时不会呈现，这样客户机就可以获得原始模板文本。然后，当您确实使用该模板并在页面中插入新内容时，请确保已存储原始模板数据，以便可以根据需要再次使用。

因此我将其修改为不进行服务器端渲染，但该模板仍不渲染数据。也许我只是太笨了。@KerrialBeckettNewham-在浏览器中查看页面上的源代码，看看模板是否在页面中具有正确的ID值。然后在以前的位置执行

console.log（jobsTemplate）

（正如我在评论中建议的那样），看看是否有正确的模板？模板在那里，但它是空的，控制台日志没有输出任何内容。您可以在这里看到代码

const $keyword = document.querySelector('#keyword');
const $jobs = document.querySelector('#jobs');
const jobsTemplate = document.querySelector('#jobs-template').innerHTML;

$keyword.addEventListener('keydown', (event)=>{

  search('/search', { keyword: $keyword.value }).then(data => {

    const jobs = data.jobs;

    const html = Mustache.render(jobsTemplate, {jobs});
    $jobs.innerHTML = html;
    
    console.log(jobs);

  }).catch((error)=>{
    console.log(error);
  });

});

<div class="card-columns" id="jobs">

<script id="jobs-template" type="text/html">
  {{#each jobs}}
    <a class="card-link" href="/job/{{_id}}">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">{{title}}</h5>
          <p class="card-text">{{description}}</p>
        </div>
      </div>
    </a>
{{/each}}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
  <script type="text/javascript" src="/js/search.js"></script>

const express = require("express");
const path = require('path');
require("./Database/mongoose");
const jobRouter = require('./Route/job');
const searchRouter = require('./Route/search');
const hbs = require("hbs");
const bodyParser = require('body-parser');

const app = express();
const port = process.env.PORT || 3000;

// define paths for Express config
const publicDirPath = path.join(__dirname, "../public");
const viewsPath = path.join(__dirname, "../templates/views");
const partialsPath = path.join(__dirname, "../templates/partials");

// setup handlebars templating engine and template location
app.set("view engine", "hbs");
app.set("views", viewsPath);
hbs.registerPartials(partialsPath);


app.use(express.static('public'));
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.use(express.json());
app.use(jobRouter);
app.use(searchRouter);

app.listen(port, () => {
  console.log(`server is up on ${port}`);
});

const html = Mustache.render(jobsTemplate, {jobs});