bind()typically happens after view and view model bindings have been created and bound. At this point, view has also been created and added to the host element, but the host element has not been connected to the document yet.
attached()typically happens after the host element of a custom element/attribute has been connected to the document.
bind(), all bindings have been bound:
- view model has access to the view elements via
refbindings. This is a great time to do heavy DOM modification setup, as it doesn’t trigger browser to re-layout or re-render.
- parent data has been passed to child via bound binding, it’s good, and early enough to initiate data related setup. For examples: create third party utilities instances, setup observer on elements, create dynamic bindings etc…
- view has not been connected to the document, so anything that requires real element sizing will not work. Typical apis:
attached(), all bindings have been bound and view has been connected to the document:
- animation can be run, when there is need for visual feedback.
- element sizing can be used. This is great for setup that needs some specific calculation, such as canvas rendering, text/code editor resizing.
jQuery(...)can be used, it can be used for some third party library that relies on selctor
What do you use?