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

问题描述

我在看 Angry Cats Backbone/Marionette 教程帖

http://davidsulc.com/博客/2012/04/15/a-simple-backbone-marionette-tutorial/

http://davidsulc.com/blog/2012/04/22/a-simple-backbone-marionette-tutorial-part-2/

我在这里发布了同样的问题/需求:

Backbone.js 关闭渲染中的 div 换行

但我只能让它适用于 Backbone.Views，而不适用于 Backbone.Marionette.ItemViews.

例如，从上面的简单骨干牵线木偶教程链接中，以 AngryCatView 为例:

AngryCatView = Backbone.Marionette.ItemView.extend({模板:#angry_cat-template"，标签名称:'tr'，className: 'angry_cat',...});

模板 #angry_cat-template 如下所示:

我不喜欢的是 AngryCatView 需要有

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

-- 如果我去掉 tagName，那么 angry_cat-template 会被

包裹起来.

我想要的是在一个地方(anger_cat-template)指定 HTML，并且在anger_cat-template 中没有大多数 HTML(所有 <td> 标签)和一点 HTML( 标签)在 AngryCatView 中.我想在anger_cat-template中写这个:

对我来说只是感觉更干净，但我一直在思考 Derik Bailey 在Backbone.js 关闭渲染中的 div 包装"中的回答，但无法让它为 Backbone.Marionette 工作.

有什么想法吗?

解决方案

2014/02/18 — 更新以适应@vaughan 和@Thom-Nichols 在评论中指出的改进

<小时>

在我的许多 itemView/布局中，我都是这样做的:

var Layout = Backbone.Marionette.Layout.extend({...onRender:函数(){//去掉那个讨厌的 wrapping-div.//假设模板中存在 1 个子元素.this.$el = this.$el.children();//展开元素以防止无限//在重新渲染期间嵌套元素.this.$el.unwrap();this.setElement(this.$el);}...});

以上代码仅在包装器 div 包含单个元素时才有效，这就是我设计模板的方式.

在您的情况下，.children() 将返回 <tr class="angry_cat">，因此这应该可以完美运行.

我同意，它确实让模板更干净.

需要注意的一点:

此技术不会仅强制使用 1 个子元素.它盲目地抓取 .children() 所以如果你错误地构建了模板以返回多个元素，就像第一个模板示例包含 3 个 <td> 元素，它不会很好地工作.

它要求您的模板返回单个元素，就像您在带有根 <tr> 元素的第二个模板中一样.

当然，如果需要，可以编写它来对此进行测试.

<小时>

这里是一个好奇的工作示例:http://codepen.io/somethingkindawierd/pen/txnpE

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

http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/

http://davidsulc.com/blog/2012/04/22/a-simple-backbone-marionette-tutorial-part-2/

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

Backbone.js turning off wrap by div in render

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

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',
  ...
});

The template, #angry_cat-template, looks like this:

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

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

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

-- if I take tagName out, then angry_cat-template gets wrapped by a <div>.

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>

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.

Any ideas?

解决方案

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

---

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

    ...

});

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

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

I agree, it does keep the templates much cleaner.

One thing to note:

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.

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.

---

Here is a working example for the curious: http://codepen.io/somethingkindawierd/pen/txnpE

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