BeforeModel not removing a class from the body element until refresh

Design
1

I’m using beforeModel on a nested route and parent route to add or remove a class from the body that stops it from being scrollable.

The parent route “recipes” has a child route called “recipe”. The “recipe” route adds a class in the beforemodel to the body called recipe-open, that class puts the body into overflow hidden. And on “recipes” route in the beforeModel hook I have to set to remove the class recipe-open. However in both scenarios when going back and forth between them I have to refresh the page to get it to apply.

I’m using simple jquery in both situations.

2

jQuery inside of your router? Can you post a gist so we can see what you’re trying to achieve.

3

Here is the js I have

App.RecipesRoute = Ember.Route.extend({
   beforeModel: function(){
      $('body').removeClass('recipe-open');
   },
    model: function(){
    return App.Recipes.findAll().then(function(response){
        return response;
    });
  }
});

App.RecipesRecipeRoute = Ember.Route.extend({
  beforeModel: function(){
    $('body').addClass('recipe-open');
  },
  model: function(params){
    return App.Recipe.findThis(params).then(function(response){
        return response;
    });
},
actions: {
    closeRecipe: function(){
        $('#recipe-detail-container').hide('slide', {direction: 'down'}, 600);
        $('#recipe-detail').fadeOut(600);
        this.transitionTo('recipes');
    }
  }
});
4

You shouldn’t be manipulating the DOM in the router or even the controller. I typically don’t even do it directly in the view unless I’m wrapping some jQuery plugin. It’s worthwhile to learn how ember’s data binding works to really harness the power of Ember.

You should consider moving this logic into your view maybe on the didInsertElement. The same thing applies for your closeRecipe event on the router. I would move this into your view and I would make use of Ember’s data binding to toggle the recipe container.

I put together a quick example of how I would to something similar toggling view example

5

Only problem is that won’t give me URL’s correct?

EDIT: Also just trying now to move them into the view and they still work but are still giving me the same problems, when transitioning back to the recipes layout either by using transitionTo or using javascripts history traversing I still have to refresh the page to get the class to remove from the body.

6

Yes it can, you will just need to implement that.

7

How would you go about doing that?

8

Here is an example of what I think you might be trying to achieve, or something similar. http://jsbin.com/ucanam/1332/

9

I completely agree with @jasonmit that this doesn’t belong in the router.

That being said, just for information sake, here’s why your original solution didn’t work. When you click a link going to an already resolved route, ember doesn’t need to call the beforeModel/model hooks again since it already has the model for the route. Hence your jquery call to remove the class would never be removed (all is well, jquery still works, and ember and jquery play just fine together).

1 Like
10

This topic was automatically closed after 3 days. New replies are no longer allowed.