New Twiddle

README.md

EmberJS Classes Example #3

An example of how you can extend classes. Please check that you can change only the properties you want.

controllers.application.js

import Ember from 'ember';

const ForceUserCharacter = Ember.Controller.extend({
  name: 'User of the force',
  weapon: 'Standard lightsaber',
  job: 'User of the Force'
})

const AnakinCharacter = ForceUserCharacter.extend({
  name: 'Anakin Skywalker',
  weapon: 'Blue lightsaber',
  affiliation: 'Jedi'
})

const DarthVaderCharacter = AnakinCharacter.extend({
  name: 'Dath Vader',
  affiliation: 'Sith'
})

export default Ember.Controller.extend({
  none: ForceUserCharacter.create(),
  anakin: AnakinCharacter.create(),
  darth: DarthVaderCharacter.create()
});

templates.application.hbs

My character without character is {{none.name}}
<ul>
<li>
Weapon: {{ none.weapon }}
</li>
<li>
Job: {{ none.job }}
</li>
<li>
Affiliation: {{ none.affiliation }}
</li>
</ul>

Now let's see the data of {{anakin.name}}
<ul>
<li>
Weapon: {{ anakin.weapon }}
</li>
<li>
Job: {{ anakin.job }}
</li>
<li>
Affiliation: {{ anakin.affiliation }}
</li>
</ul>

Now let's see the data of {{darth.name}}
<ul>
<li>
Weapon: {{ darth.weapon }}
</li>
<li>
Job: {{ darth.job }}
</li>
<li>
Affiliation: {{ darth.affiliation }}
</li>
</ul>

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}