# Ember and dom manipulating jQuery puglins

**URL:** <https://discuss.emberjs.com/t/ember-and-dom-manipulating-jquery-puglins/1796>\
**Category:** Uncategorized\
**Created:** [July 12, 2013, 7:09pm UTC](https://discuss.emberjs.com/t/ember-and-dom-manipulating-jquery-puglins/1796 "2013-07-12T19:09:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![david8401](https://avatars.discourse-cdn.com/v4/letter/d/9e8a1a/32.png) [@david8401](https://discuss.emberjs.com/u/david8401)\
**Post date:** [July 12, 2013, 7:09pm UTC](https://discuss.emberjs.com/t/ember-and-dom-manipulating-jquery-puglins/1796/1 "2013-07-12T19:09:12Z")

</div>

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](http://dimsemenov.com/plugins/royal-slider/) and integrate that into your app?

### My requirements:

- No rework of the [jQuery plugin](http://dimsemenov.com/plugins/royal-slider/) 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.

---

<div class="post-metadata">

**Author:** ![lukewendling](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lukewendling/32/15347_2.png) [@lukewendling](https://discuss.emberjs.com/u/lukewendling)\
**Post date:** [December 11, 2013, 6:10pm UTC](https://discuss.emberjs.com/t/ember-and-dom-manipulating-jquery-puglins/1796/2 "2013-12-11T18:10:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![greg\_arnott](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/greg_arnott/32/15609_2.png) [@greg\_arnott](https://discuss.emberjs.com/u/greg_arnott)\
**Post date:** [March 24, 2014, 11:27am UTC](https://discuss.emberjs.com/t/ember-and-dom-manipulating-jquery-puglins/1796/3 "2014-03-24T11:27:21Z")

</div>

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](http://gregfranko.com/blog/modular-jquery-plugins/) 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.