Skip to content

Commit

Permalink
rename component afterRender to koDescendantsComplete
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbest
mbest committed Nov 22, 2017
1 parent 1c80469 commit d913cf0
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 28 deletions.
46 changes: 23 additions & 23 deletions spec/components/componentBindingBehaviors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,13 +213,13 @@ describe('Components: Component binding', function() {
expect(testNode.childNodes[0]).toContainText('In child context 123, inside component with property 456. Now in sub-component with property 789.', /* ignoreSpaces */ true); // Ignore spaces because old-IE is inconsistent
});

it('Calls an afterRender function on the component viewmodel after the component is rendered', function() {
it('Calls an koDescendantsComplete function on the component viewmodel after the component is rendered', function() {
var renderedCount = 0;
ko.components.register(testComponentName, {
template: '<div data-bind="text: myvalue"></div>',
viewModel: function() {
this.myvalue = 123;
this.afterRender = function (element) {
this.koDescendantsComplete = function (element) {
expect(element).toBe(testNode.childNodes[0]);
expect(element).toContainHtml('<div data-bind="text: myvalue">123</div>');
renderedCount++;
Expand All @@ -234,7 +234,7 @@ describe('Components: Component binding', function() {
expect(renderedCount).toBe(1);
});

it('Inner components\' afterRender occurs before the outer component\'s', function() {
it('Inner components\' koDescendantsComplete occurs before the outer component\'s', function() {
this.after(function() {
ko.components.unregister('sub-component');
});
Expand All @@ -243,7 +243,7 @@ describe('Components: Component binding', function() {
ko.components.register(testComponentName, {
template: 'x<div data-bind="component: { name: \'sub-component\', params: 1 }"></div><div data-bind="component: { name: \'sub-component\', params: 2 }"></div>x',
viewModel: function() {
this.afterRender = function (element) {
this.koDescendantsComplete = function (element) {
expect(element).toContainText('x12x', /* ignoreSpaces */ true); // Ignore spaces because old-IE is inconsistent
renderedComponents.push(testComponentName);
};
Expand All @@ -254,7 +254,7 @@ describe('Components: Component binding', function() {
template: '<span data-bind="text: myvalue"></span>',
viewModel: function(params) {
this.myvalue = params;
this.afterRender = function () { renderedComponents.push('sub-component' + params); };
this.koDescendantsComplete = function () { renderedComponents.push('sub-component' + params); };
}
});

Expand All @@ -265,7 +265,7 @@ describe('Components: Component binding', function() {
expect(renderedComponents).toEqual([ 'sub-component1', 'sub-component2', 'test-component' ]);
});

it('afterRender occurs after all inner components even if outer component is rendered synchronously', function() {
it('koDescendantsComplete occurs after all inner components even if outer component is rendered synchronously', function() {
this.after(function() {
ko.components.unregister('sub-component');
});
Expand All @@ -275,7 +275,7 @@ describe('Components: Component binding', function() {
synchronous: true,
template: 'x<div data-bind="component: { name: \'sub-component\', params: 1 }"></div><div data-bind="component: { name: \'sub-component\', params: 2 }"></div>x',
viewModel: function() {
this.afterRender = function (element) {
this.koDescendantsComplete = function (element) {
expect(element).toBe(testNode.childNodes[0]);
expect(element).toContainText('x12x', /* ignoreSpaces */ true);
renderedComponents.push(testComponentName);
Expand All @@ -287,7 +287,7 @@ describe('Components: Component binding', function() {
template: '<span data-bind="text: myvalue"></span>',
viewModel: function(params) {
this.myvalue = params;
this.afterRender = function () { renderedComponents.push('sub-component' + params); };
this.koDescendantsComplete = function () { renderedComponents.push('sub-component' + params); };
}
});

Expand All @@ -300,7 +300,7 @@ describe('Components: Component binding', function() {
expect(testNode.childNodes[0]).toContainText('x12x', /* ignoreSpaces */ true); // Ignore spaces because old-IE is inconsistent
});

it('When all components are rendered synchronously, inner components\' afterRender occurs before the outer component\'s', function() {
it('When all components are rendered synchronously, inner components\' koDescendantsComplete occurs before the outer component\'s', function() {
this.after(function() {
ko.components.unregister('sub-component');
});
Expand All @@ -309,20 +309,20 @@ describe('Components: Component binding', function() {
ko.components.register(testComponentName, {
synchronous: true,
template: '<div data-bind="component: { name: \'sub-component\', params: 1 }"></div><div data-bind="component: { name: \'sub-component\', params: 2 }"></div>',
viewModel: function() { this.afterRender = function () { renderedComponents.push(testComponentName); }; }
viewModel: function() { this.koDescendantsComplete = function () { renderedComponents.push(testComponentName); }; }
});

ko.components.register('sub-component', {
synchronous: true,
template: '<span></span>',
viewModel: function(params) { this.afterRender = function () { renderedComponents.push('sub-component' + params); }; }
viewModel: function(params) { this.koDescendantsComplete = function () { renderedComponents.push('sub-component' + params); }; }
});

ko.applyBindings(outerViewModel, testNode);
expect(renderedComponents).toEqual([ 'sub-component1', 'sub-component2', 'test-component' ]);
});

it('afterRender waits for inner component to complete even if it is several layers down', function() {
it('koDescendantsComplete waits for inner component to complete even if it is several layers down', function() {
this.after(function() {
ko.components.unregister('sub-component');
});
Expand All @@ -331,15 +331,15 @@ describe('Components: Component binding', function() {
ko.components.register(testComponentName, {
template: '<div data-bind="with: {}"><div data-bind="component: { name: \'sub-component\', params: 1 }"></div></div>',
viewModel: function() {
this.afterRender = function (element) { renderedComponents.push(testComponentName); };
this.koDescendantsComplete = function (element) { renderedComponents.push(testComponentName); };
}
});

ko.components.register('sub-component', {
template: '<span data-bind="text: myvalue"></span>',
viewModel: function(params) {
this.myvalue = params;
this.afterRender = function () { renderedComponents.push('sub-component' + params); };
this.koDescendantsComplete = function () { renderedComponents.push('sub-component' + params); };
}
});

Expand All @@ -348,7 +348,7 @@ describe('Components: Component binding', function() {
expect(renderedComponents).toEqual([ 'sub-component1', 'test-component' ]);
});

it('afterRender waits for inner components that are not yet loaded', function() {
it('koDescendantsComplete waits for inner components that are not yet loaded', function() {
this.restoreAfter(window, 'require');
this.after(function() {
ko.components.unregister('sub-component');
Expand All @@ -369,12 +369,12 @@ describe('Components: Component binding', function() {

ko.components.register(testComponentName, {
template: '<div data-bind="component: { name: \'sub-component\', params: 1 }"></div><div data-bind="component: { name: \'sub-component\', params: 2 }"></div>',
viewModel: function() { this.afterRender = function () { renderedComponents.push(testComponentName); }; }
viewModel: function() { this.koDescendantsComplete = function () { renderedComponents.push(testComponentName); }; }
});

ko.components.register('sub-component', {
template: { require: templateRequirePath },
viewModel: function(params) { this.afterRender = function () { renderedComponents.push('sub-component' + params); }; }
viewModel: function(params) { this.koDescendantsComplete = function () { renderedComponents.push('sub-component' + params); }; }
});

ko.applyBindings(outerViewModel, testNode);
Expand Down Expand Up @@ -439,8 +439,8 @@ describe('Components: Component binding', function() {
});

var renderedComponents = [];
function alphaViewModel(params) { this.alphaValue = params.suppliedValue; this.afterRender = function () { renderedComponents.push('alpha'); }; }
function betaViewModel(params) { this.betaValue = params.suppliedValue; this.afterRender = function () { renderedComponents.push('beta'); }; }
function alphaViewModel(params) { this.alphaValue = params.suppliedValue; this.koDescendantsComplete = function () { renderedComponents.push('alpha'); }; }
function betaViewModel(params) { this.betaValue = params.suppliedValue; this.koDescendantsComplete = function () { renderedComponents.push('beta'); }; }

alphaViewModel.prototype.dispose = function() {
expect(arguments.length).toBe(0);
Expand Down Expand Up @@ -588,7 +588,7 @@ describe('Components: Component binding', function() {
this.wasDisposed = true;
}
var renderedCount = 0;
testViewModel.prototype.afterRender = function () {
testViewModel.prototype.koDescendantsComplete = function () {
renderedCount++;
}

Expand Down Expand Up @@ -859,7 +859,7 @@ describe('Components: Component binding', function() {
expect(callbacks).toEqual(1);
});

it('Does not call outer component\'s afterRender function if an inner component is re-rendered', function() {
it('Does not call outer component\'s koDescendantsComplete function if an inner component is re-rendered', function() {
this.after(function() {
ko.components.unregister('sub-component');
});
Expand All @@ -868,12 +868,12 @@ describe('Components: Component binding', function() {
var observable = ko.observable(1);
ko.components.register(testComponentName, {
template: '<div data-bind="component: { name: \'sub-component\', params: $root.observable }"></div>',
viewModel: function() { this.afterRender = function () { renderedComponents.push(testComponentName); }; }
viewModel: function() { this.koDescendantsComplete = function () { renderedComponents.push(testComponentName); }; }
});

ko.components.register('sub-component', {
template: '<span></span>',
viewModel: function(params) { this.afterRender = function () { renderedComponents.push('sub-component' + params); }; }
viewModel: function(params) { this.koDescendantsComplete = function () { renderedComponents.push('sub-component' + params); }; }
});

outerViewModel.observable = observable;
Expand Down
7 changes: 4 additions & 3 deletions spec/components/customElementBehaviors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,9 +509,9 @@ describe('Components: Custom elements', function() {
);
});

it('Should call an afterRender callback function', function () {
it('Should call an childrenComplete callback function', function () {
ko.components.register('test-component', { template: 'custom element'});
testNode.innerHTML = '<test-component data-bind="afterRender: callback"></test-component>';
testNode.innerHTML = '<test-component data-bind="childrenComplete: callback"></test-component>';

var callbacks = 0,
viewModel = {
Expand All @@ -526,6 +526,7 @@ describe('Components: Custom elements', function() {
expect(callbacks).toEqual(0);

jasmine.Clock.tick(1);
expect(testNode).toContainHtml('<test-component data-bind="afterrender: callback">custom element</test-component>');
expect(callbacks).toEqual(1);
expect(testNode).toContainHtml('<test-component data-bind="childrencomplete: callback">custom element</test-component>');
});
});
4 changes: 2 additions & 2 deletions src/components/componentBinding.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@
ctx['$componentTemplateNodes'] = originalChildNodes;
});

if (componentViewModel && componentViewModel['afterRender']) {
afterRenderSub = ko.bindingEvent.subscribe(element, "descendantsComplete", componentViewModel['afterRender'], componentViewModel);
if (componentViewModel && componentViewModel['koDescendantsComplete']) {
afterRenderSub = ko.bindingEvent.subscribe(element, "descendantsComplete", componentViewModel['koDescendantsComplete'], componentViewModel);
}

currentViewModel = componentViewModel;
Expand Down

2 comments on commit d913cf0

@brianmhunt
Copy link
Member

Choose a reason for hiding this comment

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

There are two events to track - when all elements are bound / started, and when those bindings are applied (may be async with eg component) . I'm a little concerned that this is the former - is that the case, as the name makes it sound like the latter.

@mbest
Copy link
Member Author

@mbest mbest commented on d913cf0 Nov 22, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

This is the latter - when bindings on all descendants are complete (possibly async).

Please sign in to comment.