Marionette.jsのitemViewに追加されるdivを消す方法

色々便利なMarionette.jsなのですが、CollectionViewに配列を入れてrenderした場合に、itemvViewにClass名を指定しておかないと、divが入ってしまいます。

これによって、CSSが崩れてしまったりtableがおかしくなってしまったりすることがあると思います。
今回はこれの対処方法について書いていきます。

Marionette.js使っているdivが入ってムキーってなる！

この現象なのですが、BackboneやMarionette.jsを使っていると結構起きたりなったりしませんか？ItemViewにタグを設定出来るのですが、設定しないとdivが入ってしまし、なんだかわけわからない入れ子になってしまったりします。

例えばこんなシチュエーションです。

実装例

例えば、リストを作る場合のソースはこんな感じになると思います。
※パッと書いたので、あまり正確じゃないかもしれないです…

まずはjs側

var listItemView = Marionette.ItemView.extend({
tagName:"li",
template:"#listTmpl"
});

var listCollectionView = Marionette.CollectionView.extend({
childView:itemView,
el:"#listOutput"
});

var collectionView = new listCollectionView({
collection: new Backbone.Collection([
{name: "foo"},
{name: "bar"},
{name: "hoge"}
])
});

で、テンプレートはこんな感じで、

<script type="text/html" id="itemTemplate">
<%- name %>
</script>

最終的な出力はこんな感じになると思います。

<ul id="#listOutput">
<li>foo</li>
<li>bar</li>
<li>hoge</li>
</ul>

これだけ見ると、なんと使いやすいんだろうと思うんですが、こんな場合だと困ります。

問題になる例

例えばこんな場合にうまくいきません。

直感的に考えれば、テンプレートを

とすれば行けそうな気がしますが、実際の出力結果を見てみると

となってしまいます。じゃ、viewのtagNameをとれば！とすると今度はこんな感じになります

div〜〜〜〜〜〜〜〜。。。

なんでそこに入るんだよ〜

対処方法

これを対処するにはこれを生成している、ItemViewがRenderされる際に、そのdivを消してしまえばいいんです。

それを実装したitemViewはこんな感じ↓

var listItemView = Marionette.ItemView.extend({
tagName:"li",
template:"#listTmpl",
onRender:function(){
this.$el = this.$el.children();
this.$el.unwrap();
this.setElement(this.$el);
}
});

これで思ったとおりの実装になったと思います。

まとめ

全体的にはMarionette.jsって便利なんですけど、こういうところにたまにイラッとします…