Question

我们正在为我的应用程序使用Backbone,Marionette and handlebars。当我尝试在Marionette.Region内渲染我的视图时，在模板周围再加一个div。我怎么能避免这种情况。

html代码：

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

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，我尝试以下陈述我的运气不好无效。

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

任何人都可以帮助我。

Answer 1

重要更新：

该行下方的代码无效。我没有测试就写了它（在我的手机上）。以下更新已经过测试，并纳入了@vzwick建议的重要评论。

如下所述，覆盖区域中的attachHtml。我们将对attachHtml进行三次重要更改，如以下评论中所述

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现在与el共享myApp.mainContainer。由于myApp.mainContainer是一个区域，并且它不接受event参数，因此如果重新委派事件，则不存在冲突的可能性。如果与LayoutView一起使用，则情况也是如此，因为事件的重新授权会发生在LayoutView Region el和上 LayoutView el，那么应该没有冲突。

旧帖子的开头

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

默认attachHtml的{{1}}正在执行此操作

Backbone.Marionette

要更改此功能，您可以在attachHtml中定义新的attachHtml: function(view) { // empty the node and append new view this.el.innerHTML=""; this.el.appendChild(view.el); }，如下所示：

attachHtml

现在Region attachHtml: function(view) { // empty the node and append new view this.el.innerHTML=""; this.el.appendChild(view.el.childNodes); }将直接附加您在该区域中显示的视图的内部节点。

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

mainContainer

使用上面的代码示例。

如何避免Backbone Marionette Region或LayoutView中的额外div

1 个答案:

重要更新：