Mettre un id avec des handlebars avec Handlebars.JS

Mettre un id avec des handlebars avec Handlebars.JS - Divers - Programmation

Marsh Posté le 26-01-2017 à 10:49:36    

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
Reply

Marsh Posté le 26-01-2017 à 10:49:36   

Reply

Marsh Posté le 26-01-2017 à 13:49:47    

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

Marsh Posté le 26-01-2017 à 15:55:36    

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
Reply

Marsh Posté le 26-01-2017 à 16:29:37    

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

Marsh Posté le 27-01-2017 à 09:43:31    

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

Message cité 1 fois
Reply

Marsh Posté le 27-01-2017 à 09:47:45    

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

Marsh Posté le 27-01-2017 à 11:14:26    

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
 
 
             
       

Reply

Marsh Posté le 27-01-2017 à 11:23:38    

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

Marsh Posté le 27-01-2017 à 11:49:08    

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

Message cité 1 fois
Reply

Marsh Posté le 27-01-2017 à 13:01:00    

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

Marsh Posté le 27-01-2017 à 13:01:00   

Reply

Marsh Posté le 27-01-2017 à 15:15:22    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed