I would like to pretty-up a Meteor app’s interface using jQueryUI. However, it does not play well/seamlessly with Meteor’s reactive data sources. It is possible: e.g.
- initialize UI elements in Template onRendered() functions
- create sub-templates for every {{#each}} with jQueryUI-stylized content, to get access to additional onRendered() functions
- call (‘refresh’) on UI widgets in child templates’ onRendered functions and onDestroyed functions, protected by a check to make sure the widget actually exists applied to the expected DOM element
- clean up the UI widget in the template’s own onDestroyed function
…
It seems like a bit much and maybe there is a better way. As physiocoder said on Stack Overflow, “The Meteor reactivity force you to choose who is in charge of DOM updates.”. What do other people do? Do you avoid 3rd party interactive libraries (and reimplement themes?)? Is there anything you’re happy with or wish you’d done instead?
.
References:
- http://stackoverflow.com/questions/36926194/adding-jquery-ui-resizable-after-adding-object-in-meteor/36927957
- http://stackoverflow.com/questions/28615327/running-a-function-after-a-meteor-template-is-updated/28616221#28616221
- http://stackoverflow.com/questions/26944421/jquery-ui-sortable-list-not-playing-nice-with-reactive-updates-in-meteor-templat
- http://stackoverflow.com/questions/1505270/need-to-know-if-a-jquery-ui-widget-has-been-applied-to-a-dom-object