2017-03-18 8 views
1

Je développe une application web simple, en utilisant nodeJS, express, MongoDB et Handlebars. côté serveur que j'utilise express-guidon:Le tableau de tri de JS Jode est passé avec le côté client du Handlebars

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

Alors, quand je fais une recherche de la db je veux montrer le résultat au client dans une page: /* du code */ router.get ('/ », fonction (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}); 
       } 
    }); 

Affichage le résultat est assez simple avec guidon:

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

Mais je woul d aimer permettre à l'utilisateur de trier ce tableau d'éléments sans interagir à nouveau avec le serveur, étant donné que les résultats de la requête seraient les mêmes et ne changeraient que l'ordre. le code html serait:

<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> 

Existe t-il une méthode pour trier côté client le tableau passé par res.render (...)? Si l'utilisateur choisit une option dans une balise de sélection, puis-je utiliser AJAX pour modifier la liste? Et comment? (toujours sans interagir avec le serveur et sans exécuter à nouveau la même requête sur mongoDB)

PS: Je suis débutant avec nodeJS et Handlebars, soyez patient!

Répondre

0

Votre approche actuelle est l'exécution d'un modèle de guidon sur le serveur et le passage de la chaîne résultante produite dans le cadre du rendu html.

Vous avez deux choix: réinterpréter le code HTML du client pour le placer dans un tableau pouvant être trié, puis essayer de reformuler le tableau en html ... ou faire un appel AJAX au serveur pour obtenir les données un processus entièrement dans le code client.

La première approche est délicate et aboutit à un code très difficile à maintenir. Ce dernier choix est considérablement meilleur et vous donne beaucoup plus de flexibilité. Pour ce faire, vous devrez renvoyer les données à l'aide de res.send ou res.json (voir this link for more details plutôt que res.render.) Vous pouvez conserver une référence aux données d'origine transmises dans votre code JavaScript afin peut permettre le tri plus tard

Ensuite, vous voulez exécuter votre guidon côté client modèle (ou manipuler l'aide de JavaScript - mais en utilisant le guidon est plus facile). en passant une référence à vos données de l'appel AJAX

. Il y a beaucoup à faire pour accomplir ce que vous voulez: je commencerais par obtenir les données d'un appel à res.json() (ou res.send()), et j'écrirais à la console les données que vous obtiendriez. , y Vous pouvez vous concentrer sur la compilation et l'exécution de modèles côté client. Enfin, vous pouvez ajouter du code de script pour permettre le tri des données de différentes manières.