Ember.js persist classNameBindings on transition to different routes

Question

I'm fairly new to ember and I've been trying to tackle this problem for a couple of days but I can't seem to find a solution anywhere online.

I have a page with a list of all posts, each post has one tag (like a hashtag), either 'Fitness', 'Knowledge' or 'Social'. At the top of the page I have 3 view helpers and each view helper represents a tag (fitness, knowledge or social). These will be used to filter out the posts with that particular tag name.

My problem is that when I click on a view helper I toggle the "isSelected" property to true, which adds the "isSelected" class via classNameBindings. But when I transition to a different route on the site and come back, the "isSelected" property is reset back to false and the "isSelected" class has been removed. How do I keep these values persistent and in-tact for when I revisit the route?

Here's my code:

<script type="text/x-handlebars" data-template-name="global">
<ul class="categories">
<li>{{view App.Tag class="label fitness" text="fitness"}}</li>
<li>{{view App.Tag class="label knowledge" text="knowledge"}}</li>
<li>{{view App.Tag class="label social" text="social"}}</li>
</ul>
</script>

View:

        "use strict";

 App.Tag = Ember.View.extend({

    tagName: 'span',

    template: Ember.Handlebars.compile('{{view.text}}'),

    classNames: ['label'],

    classNameBindings: ['isSelected'],
    isSelected: false,

    click: function () {
        this.toggleProperty('isSelected');
    }
});

I have also tried using a controller with actions but that way persisted the "isSelected" property but didn't preserve the addition of the class when I revisited the route.

Answer 1

This may not be ideal, but to save the state of the application, you can put the state in the controller. You probably had a simple implementation, but maybe did not specify the isSelected as a property. The below works and you can view the jsbin here

App = Ember.Application.create();

App.Router.map(function() {
  this.route('global');
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.GlobalController = Ember.Controller.extend({
  activeTags: Ember.A()
})

App.Tag = Ember.View.extend({

  tagName: 'span',

  template: Ember.Handlebars.compile('{{view.text}}'),

  classNames: ['label'],

  classNameBindings: ['isSelected'],

  isSelected: function () {
    console.log("ON CHANGE", this.get('controller.activeTags'));
    return this.get('controller.activeTags').contains(this.text);
  }.property('controller.activeTags.@each'),

  click: function () {
   var tagArray = this.get('controller.activeTags');
   if (tagArray.contains(this.text))
     this.set('controller.activeTags', tagArray.without(this.text))
   else
     tagArray.pushObject(this.text);
  }

});