如何避免 Backbone Marionette Region 或 LayoutView 中的额外 div [英] How to avoid an extra div in a Backbone Marionette Region or LayoutView

问题描述

我们正在为我的应用程序使用 Backbone、Marionette 和把手.当我尝试在 Marionette.Region 中呈现我的视图时，一个额外的 div 环绕模板.我怎样才能避免这种情况.

we are using Backbone,Marionette and handlebars for my application. When I try to render my view inside Marionette.Region, one extra div wrapping around the template. How can I avoid this.

html 代码:

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

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);

为了避免额外的 div，我尝试使用以下语句，我的运气不好，没有任何效果.

To avoid extra div, I try with following statements my bad luck nothing working.

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

谁能帮帮我.

推荐答案

重要更新:

该行下方的代码将不起作用.我在没有测试的情况下编写了它(在我的手机上).以下更新已经过测试，并包含了 @vzwick 建议的重要评论.

如下所述，覆盖区域中的 attachHtml.我们将对 attachHtml 进行三项重要更改，如以下注释中所述

As explained below, override attachHtml in the Region. We are going to three important changes to attachHtml as annotated in the comments below

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)
}

需要注意的重要一点是 OP 的 basicView 现在与 myApp.mainContainer 共享它的 el.由于 myApp.mainContainer 是一个 Region 并且它不接受 event 参数，因此如果重新委派事件，则不会发生冲突.如果将其与 LayoutView 一起使用也是如此，因为事件的重新委托会发生在 LayoutView Region el，并且不是LayoutView el，那么应该没有冲突.

The important thing to note is that the OP's basicView now shares its el with myApp.mainContainer. Since myApp.mainContainer is a Region and it does not take an event parameter there isn't a chance of there being conflicts if events are re-delegated. The same is true if this is used with a LayoutView since the re-delegation of events would happen to the LayoutView Region el, and not the LayoutView el, then there should be no conflicts.

旧帖子的开头

我之前没有尝试过，但我从功能和结构层面对你的问题很敏感.我建议你做的是覆盖 Region 的 attachHtml 函数.

I haven't tried this before, but I'm sensitive to your problem from a functional and structural level. What I suggest you do is override the Region's attachHtml function.

默认情况下，Backbone.Marionette 的 attachHtml 就是这样做的

By default Backbone.Marionette's attachHtml is doing this

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

要更改此功能，您可以在 Region 中定义一个新的 attachHtml，如下所示:

To change this functionality you could define a new attachHtml in your Region like the following:

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

现在 Region el 将直接附加您在该区域中显示的视图的内部节点.

Now the Region el will directly append the inner nodes of the view that you're showing in that region.

要覆盖 mainContainer 区域的原始 attachHtml，您将使用 Application 变量，即

To override the original attachHtml of the mainContainer region you would use your Application variable, i.e.

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

使用上面编写的代码示例.

with the code example written above.

这篇关于如何避免 Backbone Marionette Region 或 LayoutView 中的额外 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！