ember.jsember.js-view

Set Ember Application View Class for Homepage Only

DISCLAIMER: I'm pretty new to Ember so go easy. :)

I'm attempting to have a class appear that is "is-home" on the div for the application view that gets rendered if the value of App.get('currentPath') is set to 'index'. The code below works for setting the class, however, it only does so on load. If you load the page and click a link, the logic is not re-run to remove the class if you navigate away from the homepage or add it if you entered on a different page but then navigate to the homepage. I'm convinced I'm missing something simple.

Any help will be greatly appreciated!

Current Code (Note: I'm using Ember App Kit)

// app/views/application.js

export default Ember.View.extend({
  classNameBindings: ['isHome'],
  isHome: function() {
    if (App.get('currentPath') == 'index') {
      return true;
    } else {
    return false;
    }
  }.property()
});

The functionality of App.get('currentPath') is derived from this answer https://stackoverflow.com/a/18302740/3403881.

Solution

  • You have to tell the property to update when the currentPath property changes.

    isHome: function() { ... }.property('currentPath')

    However, I'm not 100% sure if it will find the currentPath property on the view since it technically exists on the controller. You might have to watch controller.currentPath instead.