Besoin de Handlebars.js pour afficher les données de l'objet au lieu de "[Object object]"

Question

Je suis en train d'utiliser des modèles Handlebars et les données JSON sont déjà représentées par [Object object], comment puis-je analyser ces données en dehors de Handlebars? Par exemple, j'essaie de remplir une variable JavaScript sur la page à travers une balise handlebars, mais cela ne fonctionne pas.

Des suggestions? Merci!

EDIT:

Pour clarifier, j'utilise ExpressJS avec Handlebars pour le templating. Dans ma route, j'ai ceci:

var user = {}
user = {'id' : 123, 'name' : 'Prénom'}

res.render('index', {user : user});

Ensuite, dans mon modèle index.hbs, j'ai maintenant un objet {{user}}. Je peux utiliser {{#each}} pour itérer à travers l'objet sans problème. Cependant, j'utilise également Backbone.js et je veux passer ces données à une Vue, comme ceci:

myView = new myView({
   user : {{user}}
});

Le problème est que {{user}} affiche simplement [Object object] dans la source. Si je le mets dans console.log, j'obtiens une erreur qui dit 'Identifiant inattendu'.

Answer 1

Lors de la sortie de {{user}}, Handlebars va d'abord récupérer la valeur de .toString() de user. Pour les Objects simples, le résultat par défaut est "[object Object]" que vous voyez.

Pour obtenir quelque chose de plus utile, vous voudrez soit afficher une propriété spécifique de l'objet :

{{user.id}}
{{user.name}}

Ou, vous pouvez utiliser/définir un helper pour formater différemment l'objet :

Handlebars.registerHelper('json', function(context) {
    return JSON.stringify(context);
});

myView = new myView({
    user : {{{json user}}} // notez les triples crochets pour désactiver l'encodage HTML
});

Answer 2

Vous pouvez simplement convertir en chaîne le JSON:

var user = {}
user = {'id' : 123, 'name' : 'Nom'};
// pour imprimer
user.stringify = JSON.stringify(user);

Ensuite, dans le modèle, imprimez :

{{{user.stringify}}};

Answer 3

Je utilise le templating côté serveur dans node-js, mais cela peut s'appliquer côté client également. J'enregistre l'aide-json de Jonathan dans node. Dans mon gestionnaire, j'ajoute du contexte (comme addressBook) via res.locals. Ensuite, je peux stocker la variable de contexte côté client comme suit:

  {{#if addressBook}}
  console.log("addressBook:", {{{json addressBook}}});
  window.addressBook = {{{json addressBook}}};
  {{/if}}

Remarquez les triple accolades (comme l'a souligné Jim Liu).

Answer 4

Vous pouvez afficher les clés/valeurs d'une liste ou d'un objet dans un modèle Handlebars comme ceci :

{{#each the_object}}
  {{@key}} : {{this}}
{{/each}}

Answer 5

Dans le Routeur Node - Stringifier l'objet de réponse. Voir la ligne ci-dessous.

 response.render("view", {responseObject:JSON.stringify(object)});

Dans la balise Script HTML - Utilisez des littéraux de modèles (chaînes de modèles) et utilisez JSON.parse.

const json= `{{{responseObject}}}`;
const str = JSON.parse(json);

A fonctionné comme un charme!