GSP fragment alternative pour l'utilisation de javascript dans Grails

Question

J'ai une application où je suis constamment confronté à un besoin d'ajouter/supprimer dynamiquement un groupe de champs d'un à plusieurs relations d'objets de domaine dans les formulaires. Les champs peuvent être des champs de texte, des sélections, des boutons radio, etc. Je ne trouve pas d'approche simple pour le faire. Pour cela la meilleure solution selon moi aurait été de rendre une div en utilisant mes tags grails dans une chaîne javascript et d'ajouter des divs supprimer sur le formulaire.
E.g. en cliquant sur Ajouter

var vector = $.parseHTML('<div><label>Vector:</label><g:select from="${..}" /><g:text......'); 
$("#vectorDiv").append(vector); 

Mais l'approche ne fonctionne pas pour diverses raisons. Un étant javascript ne permet pas de nouvelles lignes dans la chaîne (sans un/à la fin que je ne peux pas appliquer avec des étiquettes de grails).

Je ne veux pas encore commencer à utiliser React. Just jquery et étiquettes de grails.

Je voulais obtenir quelques opinions sur ce "modèle de conception" si vous voulez. rendre une div dans mon gsp.

<!--templates--> 
<div id="templates" hidden> 
    <div id="templateAccessoryVector" class="form-group accessoryVector"> 
     <div class="col-sm-4"> 
      <g:select class="form-control" name="accessoryVectorsTemplate.vectorId" 
         from="${Vector.getAccessoryVectors()}" optionKey="id" optionValue="alias" /> 
     </div> 
     <label class="control-label col-sm-2">Percentage:</label> 
     <div class="col-sm-2 input-group"> 
      <g:textField class="form-control text-right" name="accessoryVectorsTemplate.percentage" /> 
      <span class="input-group-addon">%</span> 
     </div> 
    </div> 
</div> 

puis en javascript

var templateAccessoryVectorDiv = $("#templateAccessoryVector").removeAttr('id'); 

function addAccessoryVector(){ 
    var newAccessoryVectorDiv = templateAccessoryVectorDiv.clone(); 

    $("[name^='accessoryVectorsTemplate']", newAccessoryVectorDiv).each (function(index, element) { 
     element.name = element.name.replace('accessoryVectorsTemplate', 'accessoryVectors[' + accessoryVectors + ']'); 
    }); 

    newAccessoryVectorDiv.appendTo($("#accessoryVectors")); 
    accessoryVectors++; 
} 
//add, remove functions 

Tous ces modèles pourraient vivre dans la section modèles, caché et utilisé en cas de besoin.

Answer 1

Lorsque vous devez ajouter/supprimer ces champs dynamiquement? Si c'est après une requête, vous pouvez faire cette requête avec Ajax et ensuite, en fonction de la réponse (par exemple 200), vous ajoutez ces champs à votre page sur le rappel Ajax. Ou au lieu de créer des éléments HTML avec JS, vous pouvez avoir un modèle gsp (par exemple _fields), puis envoyer en même temps que la réponse du contrôleur, comme: render template: "fields"

Je l'espère vous aide :)

Bonne chance !

Answer 2

Je pense que la meilleure solution pour cela pourrait être une balise lib. Vous pouvez avoir un tag pour chacun de vos champs. Depuis le contrôleur, vous pouvez simplement passer l'onglet à rendre et dans le GSP, vous pouvez utiliser le tag en conséquence.

De cette façon, vous pouvez prendre en charge le g: tag et le javascript le cas échéant.

Voir comment créer des balises personnalisées: link1 et link2