javascript moteur de modèle qui maintient l'accent sur les boîtes de texte, etc?

Question

Donc, je sais qu'il y a quelques moteurs de modèles là-bas, mais je pensais que je demanderais quelqu'un d'expérience et de recommandation sur celui qui peut faire ce que je suis après.

je avais déjà fait un (intranet) application web qui permet asp.net listviews éditables pour recevoir des entrées et utiliser un panneau de mise à jour pour le rendre persistent régulièrement les données (sauvegarde)

Cela marchait bien, mais était beaucoup de hackery pour se concentrer sur la post-ajax, entre autres choses. Cela est dû au fait que les panneaux de mise à jour réécrivent la section entière de html sur chaque publication ajax.

Donc, je me suis dit que pour plus de contrôle et une meilleure expérience utilisateur (et des vitesses plus rapides), j'essaierais un moteur de template basé sur jquery/javascript. Ce que je fais est de faire une sorte de liste de choses à faire (c'est plus que cela mais laissez simplement cela simple pour cet exemple) où someoen remplit une ligne avec une action, une date d'échéance, et d'autres champs. J'ai aimé John Resigs Microtemplating engine donc j'ai utilisé cela. Cependant, après avoir travaillé sur tout cela, il semble qu'il réécrit l'ensemble du modèle javascript chaque fois qu'il met à jour, ce qui est juste ce que j'essayais d'éviter, car il perd l'attention des utilisateurs. J'espérais quelque chose qui aurait juste ajouter des choses à la fin - pourquoi ont-ils besoin de réécrire tout ?? Je pourrais faire comme je l'ai fait avec le panneau udpate et utiliser un peu de piratage basé sur le focus actuel mais je préfère éviter cela et le rendre transparent.

Est-ce que je vais devoir coder manuellement ceci ou y a-t-il une manière décente de le faire?

Answer 1

Le microtemplacement de Resig est génial. Cependant, comme la plupart des moteurs de template côté client, tout ce qu'il vous donne est une chaîne de caractères. Comment vous obtenez cette chaîne dans le DOM est à vous.

Pourquoi ont-ils besoin de tout réécrire?

Le moteur de modèle n'écrase rien. Plutôt que cela est fait par vous (mais c'est vous le mettez dans le DOM). Par exemple:

var template = Template('template_id'); 

// The template engine simply generates a string: 
var generatedHtml = template({data:'goes here'}); 

// The engine's work is done at this point. 

// Now lets get the string into the DOM: 
myElement.innerHTML = generatedHtml; // OVERWRITES 

J'espérais quelque chose qui vient ajouter des choses sur la fin

Puisque vous utilisez jQuery, il est trivial d'ajouter plutôt que d'écraser. Au lieu de la ligne innerHTML ci-dessus vous utilisez la méthode append jQuery:

$(myElement).append(generatedHtml); 

Maintenant, en ce qui concerne votre problème de mise au point, encore une fois ce n'est pas strictement due au moteur de modèle, mais plutôt la nature de la manipulation du DOM en général. La solution est de forcer l'élément que vous devez avoir le focus de se concentrer:

Disons que votre modèle ressemblait à ceci, dans le langage de microtemplating de Resig:

<script type="text/html" id="template_id"> 
Foo: <input type="text" value="<%= data %>" /> 
</script> 

Reprenons l'exemple JavaScript de consentement préalable, vous vous concentrez comme celui-ci :

$(myElement).append(generatedHtml); 

// Focus the just inserted text box: 
$(myElement).find('input').focus();