关闭格包裹的Backbone.Marionette.ItemView [英] Turning off div wrap for Backbone.Marionette.ItemView

问题描述

我看着愤怒的猫骨干/木偶在这里发贴教程

I'm looking at the Angry Cats Backbone/Marionette tutorial posts here

<一个href=\"http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/\">http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/

<一个href=\"http://davidsulc.com/blog/2012/04/22/a-simple-backbone-marionette-tutorial-part-2/\">http://davidsulc.com/blog/2012/04/22/a-simple-backbone-marionette-tutorial-part-2/

和我来到了同样的问题/需要张贴在这里：

and I came upon the same question/need posted here:

<一个href=\"http://stackoverflow.com/questions/7894253/backbone-js-turning-off-wrap-by-div-in-render\">Backbone.js在DIV关闭包装渲染

但我只能得到为Backbone.Views，不Backbone.Marionette.ItemViews工作。

But I can only get that to work for Backbone.Views, not Backbone.Marionette.ItemViews.

例如，从上面的教程链接简单的骨干提线木偶，拿AngryCatView：

For example, from the simple backbone marionette tutorial links above, take AngryCatView:

AngryCatView = Backbone.Marionette.ItemView.extend({
  template: "#angry_cat-template",
  tagName: 'tr',
  className: 'angry_cat',
  ...
});

模板，＃angry_cat模板，看起来是这样的：

<script type="text/template" id="angry_cat-template">
  <td><%= rank %></td>
  <td><%= votes %></td>
  <td><%= name %></td>
  ...
</script>

我不喜欢什么，就是AngryCatView需要有

What I don't like, is that the AngryCatView needs to have

  tagName: 'tr',
  className: 'angry_cat',

- 如果我参加标签名出，那么 angry_cat模板获得由＆LT; D​​IV＆GT;

我想在一个地方（angry_cat模板）来指定HTML而不是有大多数HTML（所有的＆LT; TD＆GT; 标签）的angry_cat -template和一点点的HTML（即＆LT; 标记; TR＆GT）在AngryCatView。我想在angry_cat模板写这篇文章：

What I would like is to specify the HTML in one place (the angry_cat-template) and not have most HTML (all the <td> tags) in angry_cat-template and a little HTML (the <tr> tag) in AngryCatView. I would like to write this in angry_cat-template:

<script type="text/template" id="angry_cat-template">
  <tr class="angry_cat">
    <td><%= rank %></td>
    <td><%= votes %></td>
    <td><%= name %></td>
    ...
  </tr>
</script>

我就觉得更清洁的我，但我一直在Derik贝利的回答碴周围，不能让它为Backbone.Marionette工作Backbone.js的与DIV的渲染关闭包。

It just feels cleaner to me but I've been mucking around with Derik Bailey's answer in "Backbone.js turning off wrap by div in render" and can't get it to work for Backbone.Marionette.

任何想法？

推荐答案

2014年2月18日 - 更新，以适应由@vaughan和@汤姆 - 尼科尔斯在评论中所指出的改善

2014/02/18 — updated to accommodate the improvements noted by @vaughan and @Thom-Nichols in the comments

在我的许多ItemView控件/布局，我这样做：

In many of my itemView/layouts I do this:

var Layout = Backbone.Marionette.Layout.extend({

    ...

    onRender: function () {
        // Get rid of that pesky wrapping-div.
        // Assumes 1 child element present in template.
        this.$el = this.$el.children();
        // Unwrap the element to prevent infinitely 
        // nesting elements during re-render.
        this.$el.unwrap();
        this.setElement(this.$el);
    }

    ...

});

以上code，只有当包装div包含一个单一的元素，这是我设计我的模板工程。

The above code only works when the wrapper div contains a single element, which is how I design my templates.

在你的情况。孩子（）将返回＆LT; TR类=angry_cat＆GT; ，所以这应该工作完美。

In your case .children() will return <tr class="angry_cat">, so this should work perfect.

我同意，但它保持模板干净多了。

I agree, it does keep the templates much cleaner.

有一点要注意：

该技术不会强制只有1子元素。它盲目地抓住。孩子（），所以如果你已经正确建立的模板，用3 返回多个元，喜欢的第一个模板的例子＆LT ; TD＆GT; 元素，它不会很好地工作。

This technique does not force only 1 child element. It blindly grabs .children() so if you've incorrectly built the template to return more than one element, like the first template example with 3 <td> elements, it won't work well.

它需要你的模板中的第二个模板与根返回一个元素，因为你有＆LT; TR方式＆gt; 元素

It requires your template to return a single element, as you have in the second template with the root <tr> element.

当然，这可以写，如果需要测试这个可以。

Of course it could be written to test for this if need be.

这里是好奇的工作例如：http：//$c$cpen.io/somethingkindawierd/pen/ txnpE

这篇关于关闭格包裹的Backbone.Marionette.ItemView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！