marionette - Marionette - 有没有更好的方法来获取 CompositeView 的 itemViewContainer

Question

我希望能够隐藏和显示复合视图的 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>

Answer 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 的选择器，所以我并不认为它更好。

Answer 2

它是可用的，就像el/$el属性一样this.$itemViewContainer。但是，这似乎是某种竞争条件，即使this.$itemViewContainer在渲染完成后尝试访问有时也会失败。

现在回退到重新选择它。