在 marionette 布局视图中测试缺少的区域元素

Question

在 Marionette 中是否有一种优雅的方法来测试呈现视图后 DOM 中是否存在区域的（元素）元素？最好不要重写区域选择器并使用 jQuery 搜索 DOM.

例如 - 这个布局视图：

var view = new Marionette.LayoutView({

 regions : {
  'header' : '.header',
  'footer' : '.footer'
 },

 onRender : function() {
  if ( /* test for the existance of 'header' in the dom */ ) {
   // do something
  }
 }

});

Answer 1

优雅？不会。但是 Marionette 的 view.getRegion()._ensureElement() return 在元素存在时为真，如果元素不存在则抛出错误。所以你可以试试...

 onRender : function() {
   try {
     view.getRegion("header")._ensureElement()
     // element exists
   } catch {
     //element does not exist
   }

annotated marionette source 还建议有一个 allowMissingEl 选项，当元素不存在时，您可以将其设置为 _ensureElement() return false，但这可能对项目的其余部分产生负面影响，并可能使调试更加困难。

Answer 2

查看源代码，看起来 Morslamina 的答案是正确的 - 但是我们可以扩展 Marionette 的区域 class 并自己实施测试行为。例如：

var BaseRegion = Marionette.Region.extend({

    // tests if the element exists for this region or not
    hasEl : function() {
        if ( _.isUndefined(this.getEl(this.el)[0]) ) {
            return false;
        }
        return true;
    }
});

然后在布局视图中转到

var Layout = Marionette.Layout.extend({

    regionClass: BaseRegion,

    regions : {
        'header' : '.header',
        'footer' : '.footer'
    },

    onRender : function() {
        if ( this.getRegion('header').hasEl() ) {
            // do something, e.g. show the region
        }
    }

});

在 marionette 布局视图中测试缺少的区域元素

Test for missing region element in a marionette layout view

javascript

backbone.js

marionette