CODEWITHSUNDEEP
jquerydomember.js
Nicholas Haley
Nicholas Haley

Reputation: 4014

Ember.js and DOM Manipulation

I am a week or so into Ember and am having some confusion about conventions with respect to jQuery DOM manipulation. So I know enough already that Ember is all about maintaining state, therefore from what I understand direct DOM manipulation with jQuery is a bad practice.

That being said, I've run into situations already where I could see where it could be useful, and didn't really understand the downsides.

To give an example, I am currently building an on-boarding 'tour guide' system, that will walk users through the UI. This involves toggling tabs, moving the guide window around the page (to be positioned beside other UI elements), and more. In one section there is a list of destinations, and I need to grab the first element from the list in order to target it and then place the tour guide window beside it. If I was just using jQuery, I could easily target the list element and then get the ID of the first element. With Ember, I would need to create an action on the list an bubble that action (seems arduous).

Similarly, I could easily use a jQuery click event to simulate clicking/toggling a tab in maybe one line of code. With Ember, the process involves creating a toggle action on that element and bubbling.

If someone could explain why or why not this is a bad practice that would great!

Upvotes: 2

Views: 1498

Answers (1)

undeletable
undeletable

Reputation: 1580

Probably I didn't understand your goal well enough, but I'd like to say that DOM manipulation in Ember without using jQuery isn't that painful. You can set dynamic classname to the element you're going to style (see 'Binding Element Attributes' section in Ember guide, note that it is different for versions 1.11.0+ and earlier ones). And actions will just change the property you're using for binding.

As of good or bad practice of using jQuery: I haven't tested how jQuery impacts Ember application performance etc., but there's one obvious thing. Using jQuery for DOM manipulation makes your application too much sensitive to HTML template changes.

Upvotes: 1

Related Questions