Am I misusing Ember big time by placing jQuery in Views?

1

I’ve been battling Foundation sliders all week and finally found a fix (hack?) for my problem. At /conditions I have a responsive image slider as well as text containers that contract and expand on click.

My initial problem was that the slider wouldn’t display until I resized the browser window. At first I thought this had something to do with the js being initialized but later discovered it was because Foundation was setting the container height to 0px. To fix the issue I wrote a function that puts an initial height on the container, then Foundation’s resizing functions take over when you resize the window afterward.

I put all of this jquery code --height(), width(), hide(), click(), etc. – in the ConditionsView. I did this at the suggestion of reputable ember developers. Is this a really bad way to handle this type of UI functionality? The actual criticism from a dev on SO was:

“You are misusing Ember big time. You should not be doing DOM manipulation via jQuery, as you doing inside your view.”

Here’s the view:

Ew.ConditionsView = Ember.View.extend({
  didInsertElement: function() {
    $('.hidden-content').hide();
    $('.toggle-bar').click(function (ev) {
   	var t = ev.target

   	$('#info' + $(this).attr('target')).toggle(500);

  	 return false;
    });

   this.$().foundation(function() {
	// insert if statement if it looks terrible on imac
	$(".orbit-slides-container").height($(window).height() * 0.60); 
 });
 }
});

this.$().foundation is intializing the Foundation framework when the View is entered. And then the actual slider is in a component that is being called in the conditions.hbs template:

Ew.OrbitSliderComponent = Ember.Component.extend({
  initOrbit: function() {
    $(document).foundation('orbit', {
    	stack_on_small: true;
    	navigation_arrows: false;
    	variable_height: true;
    });
   }.on('didInsertElement')
});

If my use is incorrect, where should I be placing this type of code? I build mostly responsive apps so I am constantly sizing and resizing containers and building jquery based UI.

Thanks!

2

I see nothing wrong with the Ew.OrbitSliderComponent. I don’t think there is another way to initialise Orbit.

The Ew.ConditionsView does look a little funky. I’m not sure what you are trying to achieve but manipulating the DOM that much in didInsertElement is not really the Ember way. Content can be hidden using Handlebars conditionals or by making it an Ember View. Click actions should be added using the Handlebars action helper.

I would wrap all the jQuery UI stuff in Ember Components and use the didInsertElement hook in the component. That way you can abstract away all the jQuery stuff and still use the nice Ember MVC.

1 Like