template binding's afterRender handler does not get invoked on DOM render

[knockout]

template binding's afterRender handler does not get invoked on DOM render

[krnlde]

You could try either the autobind feature from core-decorators or instead use an arrow function to preserve the this context

[brianmhunt]

@vikashpisces The first issue is that you're using Knockout 3.4 in the jsFiddle.

You can use the TKO library (i.e. KO4 alpha) here: https://unpkg.com/[email protected]/dist/ko.js

This version works: https://jsfiddle.net/bmh_ca/q0hh2vta/3/

Let me know if there's an issue .

(Sorry for short comment -- got to run!)

[brianmhunt]

Just to complete my prior comment - You need to use $data.afterRender in order to get the bound version of afterRender. This is because the afterRender function might be found on $data, $context, the globals or an alias (e.g. foreach ... as:).

If there is anything we do to improve this, please share and we can re-open.

[brianmhunt]

@vikashpisces It would help to see a jsFiddle.

[vikashpisces]

@brianmhunt I have a jsFiddle created which illustrates the problem.

In the jsFiddle, you can see error in console when afterRender callback of template binding is being invoked on DOM render.
The same works with click binding (button element is commented out in the jsfiddle provided).
It will be nice of you if you can provide a solution for this with a brief description on what is going wrong in my code.

Thanks in advance.

[vikashpisces]

@brianmhunt Thanks a lot for the quick help on this. Binding renderhandler to $data or using fat arrow worked for me.

One thing I would like to highlight that $data was always default current context. Whether to mention it or not, binding's current context was $data. I am not sure what has changed in that context. It could be the ES6 compiler which is causing this issue.

If any support from KO provided on this part can help people who are migrating to ES6. Otherwise every places default context need to be mentioned explicitly.

Thanks @brianmhunt & @krnlde for your time.

[brianmhunt]

This issue did occur in 3.4, as you can see from the first fiddle ... but I really don't know the rationale... @mbest - any idea why afterRender is being passed null as this, instead of $data?

[mbest]

I think the rationale is that afterRender (and afterAdd, etc.) are meant for UI manipulation mostly and so aren't especially meant to manipulate the model.

[brianmhunt]

Got it thanks @mbest.

I think with ES6 classes being used as view models the expectation has probably changed. (As per this issue)

There's no technical reason we can't do this, is there?