关闭Backbone.Marionette.ItemView的div换行

Question

我在这里看看Angry Cats Backbone/Marionette教程帖子

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/

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

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

但我只能使用Backbone.Views,而不是Backbone.Marionette.ItemViews.

例如,从上面简单的主干牵线木偶教程链接,采取AngryCatView:

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

模板#angry_cat-template看起来像这样:

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

我不喜欢的是,AngryCatView需要有

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

- 如果我拿出tagName来,然后angry_cat-template被包裹起来<div>.

我想要的是在一个地方指定HTML(angry_cat-template),并且在angry_at-template中没有大多数HTML(所有<td>标签),在AngryCatView中没有HTML(<tr>标签).我想在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 Bailey的回答"Backbone.js关闭渲染中的div包裹"并且无法让它适用于Backbone.Marionette.

有任何想法吗？

Answer 1

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

在我的许多itemView /布局中,我这样做:

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

    ...

});

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

在你的情况下.children()将返回<tr class="angry_cat">,所以这应该是完美的.

我同意,它确实使模板更清洁.

有一点需要注意:

此技术不强制只有1个子元素.它盲目地抓住.children()所以如果你错误地构建模板以返回多个元素,就像第一个带有3个<td>元素的模板示例一样,它将无法正常工作.

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

当然,如果需要,可以编写它来测试.

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

Answer 2

虽然我确信有一种方法来破解内部的方式render,让它按照你喜欢的方式运行,但采用这种方法意味着你将在整个开发过程中与Backbone和Marionette的惯例作斗争.ItemView需要有一个关联$el,按照惯例,它是一个div除非你指定一个tagName.

我同情 - 特别是在布局和区域的情况下,似乎不可能阻止Backbone生成额外的元素.我建议你在学习框架的其余部分时接受约定,然后才决定是否值得render采取不同的行为(或者只是选择不同的框架).