如何避免在骨干木偶区域或LayoutView一个额外的div [英] How to avoid an extra div in a Backbone Marionette Region or LayoutView

问题描述

我们使用骨干，木偶和车把我的应用程序。当我尝试使我​​在 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 code：

html code :

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

JS code：

js code :

 //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:""});

谁能帮助我。

推荐答案

线下code将无法工作。我写的没有测试它（在我的手机）。下面的更新已经过测试，并纳入由 @vzwick 提出的重要意见。

Important Update:

The code below the line will not work. I wrote it without testing it (was on my mobile). The following update has been tested and incorporated the important comment suggested by @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 。由于 myApp.mainContainer 是一个区域，它不采取事件参数没有那里是一个机会冲突，如果事件被重新授权。如果这是使用相同的为真， LayoutView ，因为事件的重新授权将发生在 LayoutView 地区 报和的不的的 LayoutView 报，那么不应该有冲突。

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.

旧后的开始

我以前没有试过，但我从功能和结构水平，你的问题很敏感。我建议你​​做的是覆盖地区的 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.

在默认情况下的 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);
}

要更改此功能，您可以定义一个新的 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);
}

现在的地区 报将直接追加，你在该地区显示视图的内部节点

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

要覆盖原来的 attachHtml 你会用你的应用程序的 mainContainer上区域的变量，即

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

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

上面写的code的例子。

with the code example written above.

这篇关于如何避免在骨干木偶区域或LayoutView一个额外的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！