jquery - Node JS 排序数组通过 Handlebars 模板客户端传递

Question

我正在开发一个简单的 Web 应用程序，使用 NodeJS、express、MongoDB 和 Handlebars。服务器端我使用express-handlebars:

var exphbs = require('express-handlebars');
// View Engine
app.set('views', path.join(__dirname, 'views'));
app.engine('handlebars', exphbs(
    {
        defaultLayout:'layout',
        helpers: { /*my helpers*/}}));

因此，当我查询数据库时，我想在页面中向客户端显示结果: /* 一些代码 */ router.get('/', 函数(req, res) {

    /*query to mongo DB with mongoose*/
    Coll.find(queryParams, function(err,coll){
        if(err) {
                    console.log(err);
                    throw err;
                }
                else {
                    res.render('index', {'coll': coll});
                }
    });

使用 Handlebars 显示结果非常简单:

{{#each coll}}
{{this}}
{{/each}}

但是我希望允许用户对这个元素数组进行排序，而无需再次与服务器交互，因为查询结果是相同的并且只会更改顺序。html 代码为:

<select id=id>
<option>sort1</option>
<option>sort2</option>
</select>
{{#each list}}
{{this}}
{{/this}}
<script>
$(document).ready(function () {
    $('#id').change(function(){

//DO SOME STUFF WITH LIST
});
</script>

是否存在一种对客户端通过 res.render(...) 传递的数组进行排序的方法？如果用户在 select 标签中选择一个选项，我可以使用 AJAX 来修改列表吗？如何？ (始终不与服务器交互，也不在 mongoDB 上再次执行相同的查询)

PS:我是nodeJS和Handlebars的初学者，请耐心等待!

Answer 1

您当前的方法是在服务器上执行 Handlebars 模板并传递作为渲染的 html 的一部分生成的结果字符串。

您有两种选择 - 在客户端重新解释 html，将其放入可排序的数组中，然后尝试将数组重新格式化为 html...，或者对服务器进行 AJAX 调用以获取数据并完全在客户端代码中进行处理。

第一种方法很棘手，并且会导致代码非常难以维护。后一种选择要好得多，并且为您提供了更大的灵 active 。

为此，您需要使用 res.send 或 res.json 传回数据(请参阅 this link for more details 而不是 res.render。您可以保留对 JavaScript 代码中传递的原始数据的引用，以便稍后允许排序。

然后，您将需要通过向 AJAX 调用传递对数据的引用来执行您的 Handlebars 模板客户端(或使用 JavaScript 进行操作 - 尽管使用 Handlebars 更容易)。

要实现你想要的目标，还有很多事情要做。我首先能够从 res.json() 调用(或 res.send())获取数据，并将获得的数据写入控制台。然后，您可以专注于客户端模板的编译和执行。最后，您可以添加脚本代码以启用以各种方式对数据进行排序。