Discussion :

[sekaijin]

effectivement il existe des micro templating
mais du coup ce n'est plus un innerHTML le micro templating consiste justement à produire une fonction JS qui assure le boulot.

une simple question si ton template est une string produite par le développeur
pourqu'oi l'envoyer au client pour qu'il génère une fonction qu'il utilisera pour afficher le contenu ?

perso j'utilise (parfois) un générateur dans on outil de build
je lui donne mon html il me fournis une fonction que je n'ai plus qu'à placer dans un fichier js et à utiliser.

à quoi sert de faire à chaque fois tout le boulot sur le poste du client ?

A+jyt

[NoSmoking]

Bonjour,
j'aurais plutôt vu une structure du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var html = [
  {
    'tag': 'div',
    'id': 'super_id',
    'class': 'nom_class',
    'content': 'hello world'
  },
  {
    'tag': 'div',
    'class': 'nom_class',
    'content':{
      'tag':'H1',
      'content': 'le titre'
    }
  }
];

et une fonction récursive qui me créerait les éléments, avec les méthodes DOMmesque.

[sekaijin]

c'est exactement ce que propose Extjs
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.DomHelper

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var dh = Ext.DomHelper; // create shorthand alias
// specification object
var spec = {
    id: 'my-ul',
    tag: 'ul',
    cls: 'my-list',
    // append children after creating
    children: [     // may also specify 'cn' instead of 'children'
        {tag: 'li', id: 'item0', html: 'List Item 0'},
        {tag: 'li', id: 'item1', html: 'List Item 1'},
        {tag: 'li', id: 'item2', html: 'List Item 2'}
    ]
};
var list = dh.append(
    'my-div', // the context element 'my-div' can either be the id or the actual node
    spec      // the specification object
);

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
// create the node
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
// get template
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
 
for(var i = 0; i < 5, i++){
    tpl.append(list, [i]); // use template to append to the actual node
}

A+JYT

[SpaceFrog]

J'aurais codé façon extJS sans le savoir ??
http://www.developpez.net/forums/d53...ynamique-form/

[SylvainPV]

innerHTML ou document.appendChild ? Aucun des deux !

Sauf cas exceptionnels, il est bien plus pratique de reposer sur du templating.

Si vous n'avez pas besoin d'une vue dynamique, et si votre data se trouve côté serveur, alors utilisez un templating serveur: JSP, PHP...

Si vous voulez une vue dynamique avec des contrôles Javascript, chargez vos données en AJAX sous format JSON et confiez la génération de vos vues à une librairie de templating.

Quelques librairies de templating Javascript :
- http://beebole.com/pure/
- http://handlebarsjs.com/
- http://akdubya.github.com/dustjs/

Et un article très complet de tests de différentes solutions de templating :
http://engineering.linkedin.com/fron...ustjs-and-more

[Bovino]

Sylvain, ta réponse est quelque peu incohérente...
Que tu passes par une librairie de templating est une chose, mais ça n'implique que le fait que tu laisses à ce script choisir pour toi la méthode utilisée, tu ne parviendras jamais à modifier le DOM en JavaScript sans innerHTML ou Element.appendChild()...

[SylvainPV]

Certes Bovino, mais le développeur lambda ne devrait pas à avoir à se poser la question. Quand je dis "Aucun des deux", je réponds à la question "Que dois-je utiliser" et non "Que doit utiliser ma librairie de templating". Ces librairies sont créées par des spécialistes qui s'occupent de les optimiser, et des benchmarks comparatifs existent pour les questions de performance. Le développeur ne devrait se concentrer que sur l'aspect pratique et la productivité plutôt que de vouloir réinventer la roue.

Je ne pense pas que l'auteur du topic s'intéresse aux différences fondamentales en perf et praticité entre document.appendChild et innerHTML. Il cherche simplement un moyen simple et efficace de générer beaucoup de HTML. Auquel cas la meilleure réponse est d'utiliser un outil conçu exprès pour ça.

[le_chomeur]

Sujet a troll ...

Les adeptes du forums aillants pas mal d'année d'expériences en terme de problème utilisateurs, ont tous eu / vu / résolu des problèmes lié a innerHTML , résolu avec le dom utilisé a bon escient !

sur ce ...