lodash _.template() mauvaise sortie

Question

J'apprends lodash maintenant. Mon but est de sortir un tableau d'utilisateurs vers ma table html en utilisant le template lodash. Cependant, je n'arrive pas à comprendre pourquoi mon modèle ne fonctionne pas.

mes utilisateurs

var users = [ 
    { 'user': 'fred', 'active': false, 'age': 40 }, 
    { 'user': 'pebbles', 'active': false, 'age': 1 }, 
    { 'user': 'barney', 'active': true, 'age': 36 } 
]; 

mon modèle

let template4 = _.template('<ul>' + 
    '<% _.forEach(users, function(user) { %>' + 
    '<li><%- user.user %></li>' + 
    '<% }); %>' + 
    '</ul>'); 

let template4Result = template4({ 'users': users }); // I expect => '<ul><li>fred</li><li>pebbles</li><li>barney</li></ul>' 

console.log(template4Result);// => '<ul></ul>' 

Je ne peux pas comprendre comment je concevoir mon modèle afin qu'il effectue une boucle dans ma collection et ajoute un code html à chaque utilisateur en elle.

Answer 1

Votre exemple de code fonctionne; Voici un extrait en cours d'exécution.

var users = [ 
 
    { 'user': 'fred', 'active': false, 'age': 40 }, 
 
    { 'user': 'pebbles', 'active': false, 'age': 1 }, 
 
    { 'user': 'barney', 'active': true, 'age': 36 } 
 
]; 
 

 
let template4 = _.template('<ul>' + 
 
    '<% _.forEach(users, function(user) { %>' + 
 
    '<li><%- user.user %></li>' + 
 
    '<% }); %>' + 
 
    '</ul>'); 
 

 
let template4Result = template4({ 'users': users }); 
 
console.log(template4Result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Le problème est que la variable vous passez users dans le modèle n'a pas d'articles en elle. Vous n'obtenez donc pas les données que vous attendez.

Si vous récupérez vos utilisateurs de manière asynchrone (via un appel AJAX), vous devez utiliser un rappel pour générer uniquement votre modèle une fois l'appel ajax renvoyé. Ci-dessous est un pseudo -exemple (ajax n'est pas une véritable interface).

ajax.get(function(users) { 
    // this would be the "success" callback 
    // we're now able to render the template since we have the data 

    let template4Result = template4({ 'users': users }); 
}) 

Answer 2

vous pouvez essayer ceci:

let template4 = _.template('<ul>' + 
'<% _.forEach(users, function(value, key) { %>' + 
'<li><%- value.user %></li>' + 
'<% }); %>' + 
'</ul>');