ノードJSハンドルバーに渡されたソート配列テンプレートクライアント側

Question

私は、nodeJSを使用して、明示、MongoDBのとハンドルバーを単純なWebアプリケーションを開発しています。 サーバー側私は特急-ハンドルバーを使用します。私は、DBを照会するとき、私はページ内のクライアントに結果を表示したい、だから、

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

はハンドルバーと非常に簡単です：

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

しかし、私はwoulクエリの結果が同じで、順序のみが変更されることを前提として、ユーザーがこの要素の配列をサーバーと再度対話せずに並べ替えることができるようにします。 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とHandlebarsの初心者です。

Answer 1

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

あなたは2つの選択肢があります - クライアント側でhtmlを再解釈してソート可能な配列に入れてからhtml ...に配列を再整形しようとするか、サーバーへのAJAX呼び出しをデータをクライアントコードで完全に処理します。

最初の手法は手間がかかり、コードを維持することが非常に困難です。後者の選択肢はかなり優れており、柔軟性が大幅に向上します。

これを行うには、res.sendまたはres.json（res.renderではなくthis link for more detailsを参照）を使用してデータを戻す必要があります。JavaScriptコードで渡された元のデータへの参照を保持してその後、あなたのハンドルバーのテンプレートクライアント側を実行する（またはJavaScriptを使用して操作する - ハンドルバーを使用することは簡単ですが）う、後に

をソートできるようにすることができます。AJAX呼び出しから、それをあなたのデータへの参照を渡すことによって

あなたが望むものを達成するためには、たくさんのことがあります。res.json（）呼び出し（res.send（））からデータを取得し、取得したデータをコンソールに書き出すことから始めます。 、yクライアント側のテンプレートのコンパイルと実行に集中できます。最後に、さまざまな方法でデータをソートできるスクリプトコードを追加できます。