Comment éviter un extra div dans une région Marionette Backbone ou LayoutView

Nous utilisons Backbone,Marionette and handlebars pour ma demande. Lorsque j'essaie de rendre ma vue à l'intérieur de Marionette.Region , un div supplémentaire div au modèle. Comment puis-je éviter cela.

Code html:

  <div id="mainDiv"></div> <script type="text/x-handlebars-template" id="basic"> <div id="first"></div> <div id="second"></div> </script> 

Code js:

  //function var templateCompilation=function(templateId,data){ var alertCompilation=Handlebars.compile(document.getElementById(templateId).innerHTML); return alertCompilation(data); }; //Application myApp = new Backbone.Marionette.Application(); myApp.addRegions({ mainContainer:"#mainDiv" }); myApp.start(); //first view var basicView=Marionette.ItemView.extend({ template:function(){ return templateCompilation("basic",{}); } }); //reding view var basicViewObj=new basicView(); myApp.mainContainer.show(basicViewObj); 

Pour éviter d'autres div, j'essaie avec les instructions suivantes, ma mauvaise chance ne fonctionne plus.

 var basicViewObj=new basicView({el:$("#mainDiv")}); var basicViewObj=new basicView({tagName:""}); 

Quelqu'un peut-il m'aider.

Mise à jour importante:

Le code ci-dessous ne fonctionnera pas. Je l'ai écrit sans le tester (était sur mon mobile). La mise à jour suivante a été testée et a incorporé le commentaire important suggéré par @vzwick .

Comme expliqué ci-dessous, attachHtml dans la Région. Nous allons à trois changements importants pour attachHtml comme annoté dans les commentaires ci-dessous

 myApp.mainContainer.attachHtml = function (view) { // empty the node and append new view this.el.innerHTML=""; // All view elements are attached to that view's el, which acts as a // container for that view. The OP wants to get rid of that container // and use the region's el instead. So first get the children of the // view that we want to show in the Region var children = view.el.childNodes; // Now pop each child element into the el of the Region // Note that Node.appendChild(Node) removes the first element from the // Node array on each iteration so children[0] will be the next // child for each iteration while (children.length > 0) { this.el.appendChild(children[0]); } // Finally, assign a new el to the view: // view.setElement(element, delegate) is a Backbone method // that reassigns the el of the *view* to the parameter *element* // and if delegate = true, re attaches the events to the new el view.setElement(this.el, true) } 

La chose importante à noter est que le basicView de OP basicView maintenant avec myApp.mainContainer . Étant donné que myApp.mainContainer est une région et qu'il ne prend pas de paramètre d' event , il n'y a pas de risque de conflits si les événements sont délégués. La même chose est vraie si cela est utilisé avec un LayoutView car la ré-délégation d'événements arrivera à la LayoutView Region el , et non à LayoutView el , alors il ne devrait pas y avoir de conflit.


Début de l'ancien poste

Je n'ai pas essayé cela auparavant, mais je suis sensible à votre problème d'un niveau fonctionnel et structurel. Ce que je vous suggère de faire est de remplacer la fonction attachHtml la Region .

Par défaut, Backbone.Marionette 's attachHtml fait

 attachHtml: function(view) { // empty the node and append new view this.el.innerHTML=""; this.el.appendChild(view.el); } 

Pour modifier cette fonctionnalité, vous pouvez définir un nouvel attachHtml dans votre Region comme suit:

 attachHtml: function(view) { // empty the node and append new view this.el.innerHTML=""; this.el.appendChild(view.el.childNodes); } 

Maintenant, la Region el ajoutera directement les noeuds internes de la vue que vous affichez dans cette région.

Pour remplacer l'original attachHtml de la région mainContainer , vous utiliserez votre variable d' Application , c'est-à-dire

 myApp.mainContainer.attachHtml = function (view) { ... } 

Avec l'exemple de code écrit ci-dessus.