As some of you might now, Ember provides you with something called concatenated property. Their main use case is internal, which means you are unlikely to have the need to use them in your own application. There are some places in Ember where you might be surprised by how things behave and this might be one of those. Let’s start with an example.

1
2
3
4
5

App.UserView = Ember.View.extend({
  classNames: ["user"]
});

App.UserView.create().get("classNames") // => ["ember-view", "user"]

Now you might be asking, where is the "ember-view" coming from? Time for another example

1
2
3
4
5

App.DetailUserView = App.User.extend({
  classNames: ["more", "detail"]
});

App.DetailUserView.create().get("classNames") // => ["ember-view", "user", "more", "detail"]

This must be some sorcery! It seems that classNames aren’t overwritten in the subclass, but rather concatenated to the superclass’ value of that property. This works even when you overwrite it in an instance.

1

Ember.View.create({ classNames: ["cat"] }).get("classNames") // => ["ember-view", "cat"]

A simple glance at the Ember.View source code reveals it’s secrets

1
2
3
4
5

Ember.View = Ember.CoreView.extend({

  concatenatedProperties: ['classNames', 'classNameBindings', 'attributeBindings'],

  // more stuff

If this still doesn’t make any sense to you, just go take a look at the tests for concatenated properties.