1

nodeJS、express、MongoDB、Handlebars を使用して、単純な Web アプリを開発しています。サーバー側では、express-handlebar を使用します。

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

したがって、db にクエリを実行するときに、クライアントに結果をページで表示したいと考えています。

    /*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});
                }
    });

ハンドルバーを使用すると、結果を表示するのは非常に簡単です。

{{#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(...) を介して渡された配列をクライアント側でソートする方法は存在しますか? ユーザーが選択タグでオプションを選択した場合、AJAX を使用してリストを変更できますか? そしてどうやって？(常にサーバーと対話せず、mongoDB で同じクエリを再度実行せずに)

PS: 私は nodeJS とハンドルバーの初心者です。しばらくお待ちください。

4

1 に答える 1

0

現在のアプローチは、サーバー上でハンドルバー テンプレートを実行し、レンダリングされた html の一部として生成された結果の文字列を渡すことです。

2 つの選択肢があります。クライアント側で html を再解釈して並べ替え可能な配列に配置し、配列を html に再構成するか、サーバーに AJAX 呼び出しを行ってデータを取得します。クライアントコードで完全に処理します。

最初のアプローチは扱いが難しく、保守が非常に困難なコードになります。後者の選択はかなり優れており、柔軟性が大幅に向上します。

これを行うには、res.send または res.json を使用してデータを返す必要があります (詳細については、res.render ではなく、このリンクを参照してください。JavaScript コードで渡された元のデータへの参照を保持できるため、後でソートできるようにします。

次に、AJAX 呼び出しからのデータへの参照を渡すことによって、クライアント側でハンドルバー テンプレートを実行します (または、ハンドルバーを使用する方が簡単ですが、JavaScript を使用して操作します)。

やりたいことを実現するためにやるべきことはたくさんあります。res.json() 呼び出し (または res.send()) からデータを取得し、取得したデータをコンソールに書き込むことから始めます。その後、クライアント側のテンプレートのコンパイルと実行に集中できます。最後に、スクリプト コードを追加して、さまざまな方法でデータを並べ替えることができます。

于 2017-03-19T21:43:04.833 に答える