diff --git a/src/region.js b/src/region.js index 283d6a53c8..5aaafd2bfe 100644 --- a/src/region.js +++ b/src/region.js @@ -133,6 +133,8 @@ const Region = MarionetteObject.extend({ if (!_.isObject(this.el)) { this.$el = this.getEl(this.el); this.el = this.$el[0]; + // Make sure the $el contains only the el + this.$el = this.Dom.getEl(this.el); } if (!this.$el || this.$el.length === 0) { @@ -241,7 +243,7 @@ const Region = MarionetteObject.extend({ // Override this method to change how the new view is appended to the `$el` that the // region is managing attachHtml(view) { - this.Dom.appendContents(this.el, view.el, {_$contents: view.$el}); + this.Dom.appendContents(this.el, view.el, {_$el: this.$el, _$contents: view.$el}); }, // Destroy the current view, if there is one. If there is no current view, it does diff --git a/test/unit/common/build-region.spec.js b/test/unit/common/build-region.spec.js index 9dc8c59fc2..bd7e3047c1 100644 --- a/test/unit/common/build-region.spec.js +++ b/test/unit/common/build-region.spec.js @@ -115,29 +115,46 @@ describe('Region', function() { expect(this.region.el).to.equal(this.fooSelector); }); - describe('with `parentEl` also defined including the selector', function() { - beforeEach(function() { - this.setFixtures('
text
'); - this.parentEl = $('#parent'); - this.definition = _.defaults({parentEl: this.parentEl, el: '#child' }, this.definition); - this.region = this.view.addRegion(_.uniqueId('region_'),this.definition); - }); - - it('returns the jQuery(el)', function() { - expect(this.region.getEl(this.region.el).text()).to.equal($(this.region.el).text()); + describe('with `parentEl` also defined', function() { + describe('including the selector', function() { + beforeEach(function() { + this.setFixtures('
text
'); + this.parentEl = $('#parent'); + this.definition = _.defaults({parentEl: this.parentEl, el: '#child' }, this.definition); + this.region = this.view.addRegion(_.uniqueId('region_'),this.definition); + }); + + it('returns the jQuery(el)', function() { + expect(this.region.getEl(this.region.el).text()).to.equal($(this.region.el).text()); + }); }); - }); - describe('with `parentEl` also defined excluding the selector', function() { - beforeEach(function() { - this.setFixtures('
text
'); - this.parentEl = $('#parent'); - this.definition = _.defaults({parentEl: this.parentEl, el: '#not-child' }, this.definition); - this.region = this.view.addRegion(_.uniqueId('region_'),this.definition); + describe('excluding the selector', function() { + beforeEach(function() { + this.setFixtures('
text
'); + this.parentEl = $('#parent'); + this.definition = _.defaults({parentEl: this.parentEl, el: '#not-child' }, this.definition); + this.region = this.view.addRegion(_.uniqueId('region_'),this.definition); + }); + + it('returns the jQuery(el)', function() { + expect(this.region.getEl(this.region.el).text()).to.not.equal($(this.region.el).text()); + }); }); - it('returns the jQuery(el)', function() { - expect(this.region.getEl(this.region.el).text()).to.not.equal($(this.region.el).text()); + describe('including multiple instances of the selector', function() { + beforeEach(function() { + this.setFixtures('
text
text
'); + this.parentEl = $('#parent'); + this.definition = _.defaults({parentEl: this.parentEl, el: '.child' }, this.definition); + this.region = this.view.addRegion(_.uniqueId('region_'),this.definition); + }); + + it('should ensure a jQuery(el) of length 1', function() { + // calls _ensureElement + this.region.empty(); + expect(this.region.$el.length).to.equal(1); + }); }); }); });