30

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.Marionette.ItemViews ではなく、Backbone.Views に対してのみ機能させることができます。

たとえば、上記の単純なバックボーン マリオネット チュートリアルのリンクから、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 を 1 つの場所 (Angry_cat-template) で指定し、AngryCatView にほとんどの HTML (すべての<td>タグ) と AnryCatView に小さな HTML (<tr>タグ) を指定しないことです。これをanger_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>

それは私にはきれいに感じますが、「Backbone.jsがレンダリングでdivによるラップをオフにする」でDerik Baileyの答えをいじっていて、Backbone.Marionetteで動作させることができません。

何か案は？

4

5 に答える 5

42

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>うまく機能しません。

ルート要素を持つ 2 番目のテンプレートのように、テンプレートが単一の要素を返す必要があります<tr>。

もちろん、必要に応じてこれをテストするように書くこともできます。

好奇心旺盛な人のための実際の例を次に示します: http://codepen.io/somethingkindawierd/pen/txnpE

于 2013-02-04T03:24:01.947 に答える
10

内部をハックしてrender希望どおりに動作させる方法があると確信していますが、このアプローチを採用することは、開発プロセス全体を通じてバックボーンとマリオネットの慣習と戦うことを意味します。ItemViewを関連付ける必要があります。$el慣例により、divを指定しない限り、これはtagNameです。

私は共感します-特にレイアウトとリージョンの場合、Backboneが余分な要素を生成するのを止めることは不可能のようです。renderフレームワークの残りの部分を学習している間は規則を受け入れてから、異なる動作をする（または単に別のフレームワークを選択する）ためにハッキングする価値があるかどうかを判断することをお勧めします。

于 2013-02-03T20:27:26.443 に答える