Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
2195 connectés 

  FORUM HardWare.fr
  Programmation
  Divers

   Mettre un id avec des handlebars avec Handlebars.JS

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Mettre un id avec des handlebars avec Handlebars.JS

n°2295237
llyudy
SCruel
Posté le 26-01-2017 à 10:49:36  profilanswer
 

Bonjour,
J'essaye de définir un id de cette façon :  

Code :
  1. <script id="tpl" type="text/template">
  2.     {{#each fields.field}}
  3.      <div class="form-group" id="{{name}}">
  4.                        <p> des choses ici </p>
  5.                 </div>
  6.         {{/each}}
  7. </script>


Voici mon JSON :

Code :
  1. {
  2. "fields": {
  3.  "field": [{
  4.   "name": "something",
  5.   "type": "input"
  6.  }, {
  7.   "name": "something else",
  8.   "type": "input"
  9.  }, {
  10.   "name": "something else",
  11.   "type": "select"
  12.  }]
  13. }
  14. }


 
Problème : ça me retourne en sortie :
 

Code :
  1. <div class="form-group" id="{name}">


 
Au lieu de

Code :
  1. <div class="form-group" id="something">


 
Donc je me demande si il y a une autre syntaxe. merci d'avance pour votre aide


Message édité par llyudy le 26-01-2017 à 10:50:58
mood
Publicité
Posté le 26-01-2017 à 10:49:36  profilanswer
 

n°2295245
OrcusZ
Pro AMD | .Net lover
Posté le 26-01-2017 à 13:49:47  profilanswer
 

Salut,  
 
Est-ce que tu peux nous montrer comment tu récupère ton JSON et comment tu compile ton template


---------------
Made you your own sentence without believing that of the others...
n°2295249
llyudy
SCruel
Posté le 26-01-2017 à 15:55:36  profilanswer
 

Salut,  
 

Code :
  1. <script>
  2.        var slingshot = function (url, tplId, div) {
  3.           $.getJSON(url, function(data) {
  4.           var template = $(tplId).html();
  5.           var compiledTemplate = Handlebars.compile(template);
  6.           var stone = compiledTemplate(data);
  7.           $(div).append(stone);
  8.        });
  9.        }
  10.        slingshot('referentiels.json', '#tpl', '.bs-callout');
  11. </script>


Message édité par llyudy le 26-01-2017 à 15:55:58
n°2295251
OrcusZ
Pro AMD | .Net lover
Posté le 26-01-2017 à 16:29:37  profilanswer
 

Salut,
 
Il semble que ton objet "Fields" fait partie d'un object anonyme.
 
Change la compilation de ton template part :  
 

Code :
  1. var stone = compiledTemplate(data.fields);


 


---------------
Made you your own sentence without believing that of the others...
n°2295270
llyudy
SCruel
Posté le 27-01-2017 à 09:43:31  profilanswer
 

Je pense qu'il s'agit en fait de mon serveur car en mode file il compile sans problème x)

n°2295271
OrcusZ
Pro AMD | .Net lover
Posté le 27-01-2017 à 09:47:45  profilanswer
 

llyudy a écrit :

Je pense qu'il s'agit en fait de mon serveur car en mode file il compile sans problème x)


 
Ahah, test ta requete avec Postman par exemple :)
 
Pratique pour déboguer des Web Service


---------------
Made you your own sentence without believing that of the others...
n°2295278
llyudy
SCruel
Posté le 27-01-2017 à 11:14:26  profilanswer
 

Merci de ta réponse je vais essayer :)
 
J'ai une autre questions si ça te dérange pas de répondre ^^ , j'ai un JSON comme ça :
 

Code :
  1. {
  2. "refs": {
  3.  "ref": [{
  4.   "alias": "alias1",
  5.   "fields": {
  6.    "field": [{
  7.     "libelle": "Libelle",
  8.     "name": "ref_libelle",
  9.     "type": "text",
  10.     "value": "value"
  11.    }, {
  12.     "libelle": "Alias",
  13.     "name": "ref_alias",
  14.     "type": "text",
  15.     "value": "value2"
  16.    }]
  17.   }
  18.  }]
  19. }
  20. }


 
et je veux seulement récupérer les valeurs de fields.field mais je n'y arrive pas car si je ne parcours pas refs.ref rien ne s'affiche et quand je parcours refs.ref puis fields.field, ça m'affiche beaucoup beaucoup trop de champs. Y aurait-il un moyen de parcourir seulement le tableau fields.field ?
 
j'ai genre fais ça :  

Code :
  1. {{#each refs.ref}}
  2.    {{#each fields.field}}
  3.        <label> {{name}} </label>
  4.     {{/each}}
  5. {{/each}}


 
La trop de champs s'affichent (et c'est normal ^^)
 

Code :
  1. {{#each fields.field}}
  2.        <label> {{name}} </label>
  3.     {{/each}}


 
et la rien ne s'affiche tout court
 
 
             
       

n°2295279
OrcusZ
Pro AMD | .Net lover
Posté le 27-01-2017 à 11:23:38  profilanswer
 

Salut,
 
En faite tout se passe au niveau de la compilation.
Tu va devoir choisir les données que tu souhaite afficher.
 
Comme "Ref" est un tableau tu dois forcement :
 

  • Le parcourir comme tu le fait déjà
  • Donner un index lors de la compilation 'data.refs[0]'


Le premier choix pose problème pour toi car cela affiche trop de données
Le second sera limitant car tu va afficher peut être pas suffisamment de données.
 
Comme j'ai vu que tu utiliser boostrap, le mieux c'est d'utiliser les collapse :
 

Code :
  1. {{#each refs.ref}}
  2. <div>
  3. <a class="btn btn-primary" role="button" data-toggle="collapse" href="{{alias}}" aria-expanded="false" aria-controls="collapseExample">
  4.   {{alias}}
  5. </a>
  6. <div class="collapse" id="{{alias}}">
  7.   <div>
  8. {{#each fields.field}}
  9.        <label> {{name}} </label>
  10.     {{/each}}
  11. </div>
  12. </div>
  13. <div>
  14. {{/each}}


 
L'avantage c'est que tu n'affichera que les fields disponible dans une ref précise.
 
Ensuite, je te suggère aussi de revérifier le model que tu récupère, il est peut être possible de le rendre plus simple.
Car en général c'est plus simple de faire un code propre et compréhensible coté serveur que coté client.
 


---------------
Made you your own sentence without believing that of the others...
n°2295282
llyudy
SCruel
Posté le 27-01-2017 à 11:49:08  profilanswer
 

Merci pour ton aide ! :) je débute dans ce domaine et côté serveur je traite avec XSL où je débute aussi donc je tâte et ça rend des trucs pas très propres ^^.  
 
En tout cas merci bien pour tes explications, la logique est déjà un peu plus clair dans ma tête maintenant

n°2295285
OrcusZ
Pro AMD | .Net lover
Posté le 27-01-2017 à 13:01:00  profilanswer
 

llyudy a écrit :

Merci pour ton aide ! :) je débute dans ce domaine et côté serveur je traite avec XSL où je débute aussi donc je tâte et ça rend des trucs pas très propres ^^.  
 
En tout cas merci bien pour tes explications, la logique est déjà un peu plus clair dans ma tête maintenant


 
Pas de soucis.
Les frameworks du style Handlebars sont puissant mais un peux archaïque ( donc pas simple à comprendre au début )
 
Bon courage


---------------
Made you your own sentence without believing that of the others...
mood
Publicité
Posté le 27-01-2017 à 13:01:00  profilanswer
 

n°2295291
llyudy
SCruel
Posté le 27-01-2017 à 15:15:22  profilanswer
 

Pour ma première question, étant donné que je fais du traitement par XSL les {{}} il croit que c'est du XSL dans les balises du coup ils les traitent comme du XSL je suis donc obligé de les mettre entre balise <xsl:attribute> ^^


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Divers

   Mettre un id avec des handlebars avec Handlebars.JS

 

Sujets relatifs
[JS] Créer une nouvelle méthode pour n'importe quel objet[Résolu] Mettre à jour/ajouter éléments dans un XML en C#
Fonction JS pour récupérer le tag image "Alt" sur un diaporama[JS/Xml] Parser des éléments en fonction de la balise contenante?
[noob JS] Equivalent JS des include/require?Mettre une légende sur une google map
Mettre en place un relai HTTPMettre le résultat d'un ping dans un log
Comment mettre à jour plusieurs branches ?[D3.JS] Fonction d3.layout.stack
Plus de sujets relatifs à : Mettre un id avec des handlebars avec Handlebars.JS


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR