Ember and dom manipulating jQuery puglins

1

I’d be interested what the best way is to integrate jQuery plugins that heavily manipulate the dom into an Ember application.

I’ve read various post about jQuery (mobile) integrations and understood the basics:

  • use didInsertElement to do all the setup/init
  • wrap the plugins so that they work within the Ember framework (event delegation, teardown, …)

This works well with some plugins/helpers, but certainly not for all. What if you do want to use e.g. this awesome slider plugin and integrate that into your app?

My requirements:

  • No rework of the jQuery plugin is anyhow possible
  • Allow the jQuery plugin to manipulate the dom as needed
  • Everything encapsulated in Ember objects so that all the magic of Ember can still be used

My current solution is as follows:

  • I utilze a ContainerView to setup 2 childviews. The ContainerView encapsulates everything and takes care of setting up observers for important events on the model.
    • Childview #1 takes care of rendering the dom structure that the jQuery plugin expects.
      Via display: hidden this view is actually never visible for the user.
    • Childview #2 wraps the jQuery plugin (didInsertElement/willDestroyElement).
      • The childview uses the $() selector to access the html that the other childview has rendered, strips metamorph tags (the plugin doesn’t like them) and inserts the plugins html.
      • The ContainerView takes care of instantiating and removing this childview as needed.
      • The ContainerView observes model changes and translates this into actions on the jQuery plugin (e.g. arrayDidChange → append new slide.
  • A ObjectController helps keeps track of the application state
  • Ember.Model as a lightweight model library

The solution works well but I’d be interested in how others, more experienced ember users, may have solved that scenario.

1 Like
2

Hi, did you find any good solutions for using jquery plugins with Ember? I’m also trying to use a slider plugin (sly.js) and having difficulty understanding how to integrate as the plugin is unable to attach event handlers to elements in ember views.

1 Like
3

Use Grunt to wrap the jQuery plugins which are in the loose munted format one expects from that sloppy library, and add them to the concatenation file of plugins that play nice.

This post shows a means of performing that task, as well as describes other techniques which may be of interest.

@lukewendling - you’ll want to be binding a listener to the parent element wrapping a simple view, else on the instantiation.