4

compositeView の itemViewContainer を非表示および表示できるようにしたいのですが、もっとうまくできると思います。

これが私のコードです：

MyCompView = Backbone.Marionette.CompositeView.extend({
    // ITEM VIEW
    itemView: MyView,

    // ITEM VIEW CONTAINER
    itemViewContainer: 'tbody',

    // EVENTS
    events: {
        'click #table-toggle': 'onToggleClick'
    },

    onToggleClick: function(event){
    event.preventDefault();
    this.toggle();
    },
    // Toggle
    toggle: function(){
        this.$(this.itemViewContainer).toggle();
    }

MyCompView のテンプレートは次のとおりです。

<script id='MyCompView-template' type='text/x-handlebars-template'>
<div>
    <span id='heading-container' style="font-weight:bold">Some name</span>
    <a id='table-toggle' href="#">[-]</a>
</div>

<table>
    <thead>
    </thead>

    <tbody>
    </tbody>
</table>

4

2 に答える 2

3

もう 1 つのオプションは、この例ではあまり良くありませんがui、ビューの構成を使用することです。


MyCompView = Backbone.Marionette.CompositeView.extend({
    // ITEM VIEW
    itemView: MyView,

    // ITEM VIEW CONTAINER
    itemViewContainer: 'tbody',



    // UI configuration to cache selectors
    // -----------------------------------
    ui: {
      table: "tbody"
    }


    // EVENTS
    events: {
        'click #table-toggle': 'onToggleClick'
    },

    onToggleClick: function(event){
    event.preventDefault();
    this.toggle();
    },
    // Toggle
    toggle: function(){
        this.ui.table.toggle();
    }
}

コード内で同じセレクターを複数回再利用している場合、これは重複を減らすのに役立ちます。ただし、あなたの場合、itemViewContainerのセレクターを直接複製しているため、それほど優れているとは思いません。

于 2013-02-12T15:00:22.890 に答える
2

el/$elプロパティと同様に、として利用できますthis.$itemViewContainer。ただし、ここではある種の競合状態のようで、this.$itemViewContainerレンダリングが完了した後にアクセスしようとしても失敗することがあります。

今のところ再選択に戻ります。

于 2013-11-12T09:56:44.857 に答える