4

jQuery UI is not yet a Meteor "package", and even if it eventually becomes one, there will be newer jQuery and jQuery UI versions, and other jQuery plugins that one might want to use with Meteor. There are a variety of issues that arise:

  1. Load via <script> tags, or put the js files in the client or root dir?
  2. Any problems if sourcing the scripts from a CDN? Better to store locally (e.g. in "public" dir)?
  3. Since $(document).ready() might be called before Templates are rendered, where is the best place to call various setup functions that might normally be called from .ready()? Should they be called in Templates.<Name>.rendered, so that if the DOM changes during template rendering, the various event handlers will be re-attached to the new DOM nodes? Will this result in memory leaks of old handlers that still exist to handle phantom nodes that have been removed from the DOM?
  4. If you are trying to change model data based on an event callback from a jQuery UI widget (and the event is not natively supported by Meteor Template events, such as "click" or "dblclick"), what is the best way to identify the Collection data that is associated with the widget in question, during the callback? Should you load the _id of the object into the DOM during Template..rendered, and then read it back out during the associated jQuery UI event handler? Are there any other methods?

Note that the issues have changed since 0.5.0, according to this question, so some existing similar StackOverflow questions may be outdated (also, also, also).

If an example will help you answer, here is a working (?) Meteor project that integrates jQuery Draggable and Droppable: http://products-jqueryui.meteor.com/ with Source Here based on the Tutorial Here

(By "safely" in my question, I mean in a way that will not cause disruptive errors in the Meteor framework (or cause Meteor to disrupt jQuery/jQuery UI), and also as efficiently as possible: avoiding excessive DOM manipulation/rendering, excessive client/server traffic, or causing memory leaks.)

Community
  • 1
  • 1
jpeskin
  • 2,801
  • 4
  • 28
  • 27

1 Answers1

4
  1. Put them in the /client folder. Any javascript files will be auto-loaded by Meteor and should be available when Meteor.startup happens.
  2. See my answer to question 1.
  3. Use Meteor.startup instead of $(document).ready(), as that will be called when Meteor and the document are ready. If you want to execute logic that templates depend on, use Template.rendered, because you'll want to re-execute the logic each time the template is touched by Meteor.
  4. In the callback, this will refer to the current object.
Rahul
  • 12,181
  • 5
  • 43
  • 64