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>

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

問題になる例

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

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

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

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

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

<li><li data-listName = "foo">foo</li></li>
<li><li data-listName = "bar">bar</li></li>
<li><li data-listName = "foo">hoge</li></li>

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

<div><li data-listName = "foo">foo</li></div>
<div><li data-listName = "bar">bar</li></div>
<div><li data-listName = "foo">hoge</li></div>

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って便利なんですけど、こういうところにたまにイラッとします…

Leave a Comment

お問い合わせ

お仕事の依頼や何か質問などあれば、こちらからお願いします〜。

Not readable? Change text.

Start typing and press Enter to search