Does afterRender work with Knockout components?

Question

afterRender works with template bindings, but after converting my templates to components, there does not seem to be any way to use afterRender. I

Answer 1

Make a new binding, like so

ko.bindingHandlers.initBinding = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    debugger
    if (valueAccessor() && valueAccessor().afterRender && bindingContext.$data) {
        valueAccessor().afterRender(bindingContext.$data);
    }
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    }
};

export default ko.bindingHandlers.initBinding

You don't need the export if you're not using ES6(babel etc).

Then in your component html, you can do something like this

    
Loaded

And in your component model

class staffDirectory {

    constructor() {
        console.log('staff directory loaded');
    }

    afterRender() {
        console.log('afterRender called');
    }

}

export default staffDirectory;