把手附加动态内容

时间:2019-06-14 12:51:32

标签: mysql express handlebars.js

我该如何使用把手将数据追加到现有数据列表中?

我可以打电话给?page=1来显示接下来的10个项目,但是如何将它们附加到已经存在的列表中呢?

我已经有了一个函数,当用户滚动到底部时,可以在其中调用一些javascript。

app.get("/", function (req, res) {
    let numRows;
    const numPerPage = parseInt(req.query.npp, 10) || 10;
    const page = parseInt(req.query.page, 10) || 0;
    let numPages;
    const skip = page * numPerPage;
    // Here we compute the LIMIT parameter for MySQL query
    const limit = skip + "," + numPerPage;
    queryAsync("SELECT count(*) as numRows FROM cars")
        .then(function (results) {
            numRows = results[0].numRows;
            numPages = Math.ceil(numRows / numPerPage);
        })
        .then(() => queryAsync("SELECT * FROM cars ORDER BY id ASC LIMIT " + limit))
        .then(function (results) {
            const responsePayload = {
                results: results
            };
            const data = { cars: results };
            const template = fs.readFileSync("./index.hbs", "utf8");
            const html = handlebars.compile(template)(data);
            if (page < numPages) {
                responsePayload.pagination = {
                    current: page,
                    perPage: numPerPage,
                    totalPages: numPages,
                    previous: page > 0 ? page - 1 : undefined,
                    next: page < numPages - 1 ? page + 1 : undefined
                }
            }
            else responsePayload.pagination = {
                err: "queried page " + page + " is >= to maximum page number " + numPages
            }
            //res.send(responsePayload);
            res.send(html);
        })
        .catch(function (err) {
            console.error(err);
            res.json({ err: err });
        });
});
<div id="cars-wrapper">
   <div class="row">
       {{#each cars}}
            <div class="col s12 m6 l4 xl3">
              <div class="car z-depth-1">
                <div class="car-header">
                  <div class="row no-margin">
                    <div class="col s12 m4 center-align">{{this.id}}</div>
                </div>
              </div>
            </div>
        {{/each}}
    </div>
</div>

0 个答案:

没有答案