Mettre un id avec des handlebars avec Handlebars.JS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mettre un id avec des handlebars avec Handlebars.JS

llyudy

SCruel

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

Code :

<script id="tpl" type="text/template">
{{#each fields.field}}
<div class="form-group" id="{{name}}">
<p> des choses ici </p>
</div>
{{/each}}
</script>

Voici mon JSON :

Code :

{
"fields": {
"field": [{
"name": "something",
"type": "input"
}, {
"name": "something else",
"type": "input"
}, {
"name": "something else",
"type": "select"
}]
}
}

Problème : ça me retourne en sortie :

Code :

<div class="form-group" id="{name}">

Au lieu de

Code :

<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

Publicité

OrcusZ

Pro AMD | .Net lover

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

llyudy

SCruel

Salut,

Code :

<script>
var slingshot = function (url, tplId, div) {
$.getJSON(url, function(data) {
var template = $(tplId).html();
var compiledTemplate = Handlebars.compile(template);
var stone = compiledTemplate(data);
$(div).append(stone);
});
}
slingshot('referentiels.json', '#tpl', '.bs-callout');
</script>

Message édité par llyudy le 26-01-2017 à 15:55:58

OrcusZ

Pro AMD | .Net lover

Salut,

Il semble que ton objet "Fields" fait partie d'un object anonyme.

Change la compilation de ton template part :

Code :

var stone = compiledTemplate(data.fields);

---------------
Made you your own sentence without believing that of the others...

llyudy

SCruel

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

OrcusZ

Pro AMD | .Net lover

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

llyudy

SCruel

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 :

{
"refs": {
"ref": [{
"alias": "alias1",
"fields": {
"field": [{
"libelle": "Libelle",
"name": "ref_libelle",
"type": "text",
"value": "value"
}, {
"libelle": "Alias",
"name": "ref_alias",
"type": "text",
"value": "value2"
}]
}
}]
}
}

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 :

{{#each refs.ref}}
{{#each fields.field}}
<label> {{name}} </label>
{{/each}}
{{/each}}

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

Code :

{{#each fields.field}}
<label> {{name}} </label>
{{/each}}

et la rien ne s'affiche tout court

OrcusZ

Pro AMD | .Net lover

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 :

{{#each refs.ref}}
<div>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="{{alias}}" aria-expanded="false" aria-controls="collapseExample">
{{alias}}
</a>
<div class="collapse" id="{{alias}}">
<div>
{{#each fields.field}}
<label> {{name}} </label>
{{/each}}
</div>
</div>
<div>
{{/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...

llyudy

SCruel

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

OrcusZ

Pro AMD | .Net lover

llyudy a écrit :

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

Publicité

llyudy

SCruel

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

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

Page générée en 0.077 secondes