New Twiddle

README.md

EmberJS Classes Example #

An example of class extension

You can extend an EmberJS class after it's creation by using the "reopen" function.

Beware! If you create an object and then reopen the class, the object will not have the property! You can check the "moreDetails" property to know that.

More... you can create static properties to the class by using reopenClass. You can always overwrite that by creating an object.

I know, it's complicated and possibly you will never use it... but still, it's here, in the code.

controllers.application.js

import Ember from 'ember';

let SkyWalkerFamily = Ember.Object.extend({
  surname: "Skywalker"
});

SkyWalkerFamily.reopen( {
  details: "Force is strong in him"
});

SkyWalkerFamily.reopenClass( {
  lastJedi: "Luke"
});

SkyWalkerFamily.reopen( {
  lastJedi: "Ben"
});


let luke = SkyWalkerFamily.create( {
  name: "Luke"
});

SkyWalkerFamily.reopen( {
  moreDetails: "They usually ends killing each other"
});


export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  skyWalkerMember: luke,
  SkyWalkerFamily: SkyWalkerFamily
});

templates.application.hbs

<h1>{{skyWalkerMember.name}} {{skyWalkerMember.surname}}</h1>
<h2>{{skyWalkerMember.details}}</h2>
<h2>{{skyWalkerMember.moreDetails}}</h2>
<h2>The last Jedi until last movies {{SkyWalkerFamily.lastJedi}}</h2>
<h2>The last Jedi now {{skyWalkerMember.lastJedi}}</h2>

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": {}
}