Logo_Emberjs

Astuce Ember.js : réussir vos tableaux

Flattr this!

Truc bête, quand je me suis mis à Ember.js, j'ai rencontré un souci bête et méchant qui donnait ça :

Alors que je voulais ça :

L'astuce vient de la façon de déclarer vos templates. Quand vous voulez mettre en place un tableau de données dynamique, les balises script doivent encadrer le tableau et non encadré la ligne tr de modèle.

Ainsi, il ne faut pas faire :

<div>
	<h1>Dernières propositions</h1>
	<table class="basic" cellspacing="0">
		<script type="text/x-handlebars">
			{{#collection contentBinding="App.myController" tagName="tbody" itemViewClass="App.myView"}}
				<th>{{content.date}}</th>
          			<td class="full">{{content.name}}</td>
				<td><img src="images/ball_{{content.couleur}}_16.png" alt="" title="Online User"></td>
          		{{/collection}}
		</script>
	</table>
</div>

Mais bien :

<script type="text/x-handlebars">
	<div>
		<h1>Dernières propositions</h1>
		<table class="basic" cellspacing="0">
			{{#collection contentBinding="App.myController" tagName="tbody" itemViewClass="App.myView"}}
				<th>{{content.date}}</th>
          			<td class="full">{{content.name}}</td>
				<td><img src="images/ball_{{content.couleur}}_16.png" alt="" title="Online User"></td>
 			{{/collection}}
  		</table>
  	</div>
</script>

Et là tout de suite, ça marche mieux 😉

Le tagName permet d'indiquer dans quel région du tableau doit se situer la boucle à travers votre collection et va donc générer, dans ce cas, les tags <tbody> et <tr> pour vous.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans JavaScript, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://www.pure-tentation.fr/ syndrael

    Désolé je suis sur http://knockoutjs.com/
    Je débute peut-être mais la courbe d’apprentissage est des plus sympatiques.
    S.

    • http://www.mathieurobin.com/ Mathieu

      Pas eu l’occasion d’essayer mais j’en ai eu quelques bons échos. Si l’envie te tente de faire partager ton expérience, n’hésite pas, mon blog est ouvert à ceux qui sont prêts à écrire 😉

Articles liés