Revision history [back]

click to hide/show revision 1
initial version

answered 2021-03-25 10:12:53 +0800

cor3000 gravatar image cor3000

ZK Team

I would strongly recommend using ZK's built-in lifecycle listener w:onBind the fact that onload works is just an coincidental side effect of how ZK distinguishes between client side listeners and client side overrides.

A client side listener starts with on followed by a capital letter e.g. onBind or onLoad... both will be listeners at ZK widget level (not DOM). ZK will trigger onBind but it doesn't know about onLoad so that's never executing. The benefit of a listener is that you have the this variable set to the current widget so you don't have to find it first.

A client side override will just define a new (or override an existing) JS property on the widget object. The value can be any valid JS expression e.g. just a number w:myprop="123" or a string w:myprop="'text'", but also a function w:myfunc="function() { console.log('debug');}" or in your case a function call w:myprop="doSomething()" (not sure why you need the parenthesis there, for me the function gets called with and without them), if the function returns a value it will be assigned to the widget property. since there's no capital letter after on in your onload it does exactly that, assign the result of the method call to a new property called onload - after executing the function. There's no guarantee that the DOM elements are already rendered at that point. That's why there's w:onBind the DOM element will be available from the current widget inside the listener. elem = this.$n().

So it's not just a matter of Syntax it's a matter of meaning, and guarantee when your custom init code is called.

I hope that clarifies.

I would strongly recommend using ZK's built-in lifecycle listener w:onBind the fact that onload works is just an coincidental side effect of how ZK distinguishes between client side listeners and client side overrides.

A client side listener starts with on followed by a capital letter e.g. onBind or onLoad... both will be listeners at ZK widget level (not DOM). ZK will trigger onBind (once the DOM elements are available) but it doesn't know about onLoad so that's never executing. being executed. The benefit of a listener is that you have the this variable set to the current widget so you don't have to find it first.

A client side override will just define a new (or override an existing) JS property on the widget object. The value can be any valid JS expression e.g. just a number w:myprop="123" or a string w:myprop="'text'", but also a function w:myfunc="function() { console.log('debug');}" or in your case a function call w:myprop="doSomething()" (not sure why you need the parenthesis there, for me the function gets called with and without them), if the function returns a value it will be assigned to the widget property. since there's no capital letter after on in your onload it does exactly that, assign the result of the method call to a new property called onload - after executing the function. There's no guarantee that the DOM elements are already rendered at that point. That's why there's w:onBind the DOM element will be available from the current widget inside the listener. elem = this.$n().

So it's not just a matter of Syntax it's a matter of meaning, and guarantee when your custom init code is called.

I hope that clarifies.

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More