Question

我希望能够隐藏并显示一个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>

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有时也会失败。

暂时重新选择它。

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

2 个答案: