Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Don't detach pre-existing HTML when view's el is already in the region #3260

Merged
merged 1 commit into from
Dec 23, 2016
Merged

Don't detach pre-existing HTML when view's el is already in the region #3260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions src/region.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,25 +57,34 @@ const Region = MarionetteObject.extend({

this.triggerMethod('before:show', this, view, options);

monitorViewEvents(view);

this.empty(options);

// We need to listen for if a view is destroyed in a way other than through the region.
// If this happens we need to remove the reference to the currentView since once a view
// has been destroyed we can not reuse it.
view.on('destroy', this._empty, this);
// Assume an attached view is already in the region for pre-existing DOM
if (!view._isAttached) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we document this assumption?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think pre-existing DOM stuff needs its own documentation: #3128 (comment) and this is only a small portion of what isn't fully documented.

this.empty(options);
}

this._proxyChildViewEvents(view);
this._setupChildView(view);

this._renderView(view);

this._attachView(view, options);

this.currentView = view;

this.triggerMethod('show', this, view, options);
return this;
},

_setupChildView(view) {
monitorViewEvents(view);

this._proxyChildViewEvents(view);

// We need to listen for if a view is destroyed in a way other than through the region.
// If this happens we need to remove the reference to the currentView since once a view
// has been destroyed we can not reuse it.
view.on('destroy', this._empty, this);
},

_proxyChildViewEvents(view) {
const parentView = this._parentView;

Expand Down Expand Up @@ -119,8 +128,6 @@ const Region = MarionetteObject.extend({
view._isAttached = true;
triggerMethodOn(view, 'attach', view);
}

this.currentView = view;
},

_ensureElement(options = {}) {
Expand Down
24 changes: 20 additions & 4 deletions test/unit/region.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,15 +293,15 @@ describe('region', function() {
this.regionHtml = this.$parentEl.html();
this.showOptions = {preventDestroy: true};
this.region.replaceElement = true;
this.region.show(this.view, this.showOptions);
this.region.show(this.view1, this.showOptions);
});

it('should have replaced the "el"', function() {
expect(this.region.isReplaced()).to.be.true;
});

it('should append the view HTML to the parent "el"', function() {
expect(this.$parentEl).to.contain.$html(this.view.$el.html());
expect(this.$parentEl).to.contain.$html(this.view1.$el.html());
});

it('should remove the region\'s "el" from the DOM', function() {
Expand All @@ -319,7 +319,7 @@ describe('region', function() {
});

it('should not restore if the "currentView.el" has been remove from the DOM', function() {
this.view.remove();
this.view1.remove();
this.region._restoreEl();
expect(this.region.currentView.el.parentNode).is.falsy;
});
Expand All @@ -330,7 +330,7 @@ describe('region', function() {
});

it('should remove the view from the parent', function() {
expect(this.$parentEl).to.not.contain.$html(this.view.$el.html());
expect(this.$parentEl).to.not.contain.$html(this.view1.$el.html());
});

it('should restore the region\'s "el" to the DOM', function() {
Expand Down Expand Up @@ -547,6 +547,22 @@ describe('region', function() {
});
});

describe('when a view is already attached and shown in a region', function() {
beforeEach(function() {
this.setFixtures('<div id="region"><div id="view">Foo</div></div>');
this.myRegion = new Marionette.Region({
el: '#region'
});
this.sinon.spy(this.myRegion, 'empty');

this.myRegion.show(new Marionette.View({ el: '#view' }));
});

it('should not empty the region', function() {
expect(this.myRegion.empty).to.not.have.been.called;
});
});

describe('when a view is already shown and showing another', function() {
beforeEach(function() {
this.MyRegion = Backbone.Marionette.Region.extend({
Expand Down