Working with classes and instances

Creating and extending classes is a major feature of the Ember object model. In this recipe, we'll take a look at how creating and extending objects works.

How to do it...

  1. Let's begin by creating a very simple Ember class using extend():
    const Light = Ember.Object.extend({
  isOn: false
});

    This defines a new Light class with a property called isOn. Light inherits properties and behavior from the Ember object, such as initializers, mixins, and computed properties.

    Tip

    Ember Twiddle tip

    At any point of time, you might need to test out small snippets of the Ember code. An easy way to do this is to use a website called Ember Twiddle. From this website, you can create an Ember application and run it in the browser as if you were using the Ember CLI. You can even save and share it. It has similar tools such as JSFiddle but only for Ember. Check it out at http://ember-twiddle.com.

  2. Once you have defined a class, you'll need to be able to create an instance of it. You can do this using the create() method. We'll go ahead and create an instance of Light:
    constbulb = Light.create();

Accessing properties within the bulb instance

  1. We can access the properties of the bulb object using the set and get accessor methods. Let's go ahead and get the isOn property of the Light class:
    console.log(bulb.get('isOn'));

    The preceding code will get the isOn property from the bulb instance.

  2. To change the isOn property, we can use the set accessor method:
    bulb.set('isOn', true)

    The isOn property will now be set to true instead of false.

Initializing the Ember object

The init method is invoked whenever a new instance is created. This is a great place to put in any code that you may need for the new instance.

  1. In our example, we'll add an alert message that displays the default setting for the isOn property:
    const Light = Ember.Object.extend({
  init(){
    alert('The isON property is defaulted to ' + this.get('isOn'));
  },
  isOn: false
});
  2. As soon as the Light.create line of code is executed, the instance will be created and The isON property is defaulted to false message will pop up on the screen.

    Tip

    Subclass

    Be aware that you can create subclasses of your objects in Ember. You can override methods and access the parent class using the _super() keyword method. This is done by creating a new object that uses the Ember extend method on the parent class.

    Another important thing is if you're subclassing a framework class such as Ember.Component and you override the init method, you'll need to make sure that you call this._super(). If not, the component might not work properly.

Reopening classes

At any time, you can reopen a class and define new properties or methods in it. For this, use the reopen method.

In our previous example, we had an isON property. Let's reopen the same class and add a color property:

  1. To add the color property, we need to use the reopen() method:
        Light.reopen({
      color: 'yellow'
    });
  2. If needed, you can add static methods or properties using reopenClass:
    Light.reopenClass({
  wattage: 80
});
  3. You can now access the static property Light.wattage.

How it works...

In the previous examples, we created an Ember object using extend. This tells Ember to create a new Ember class. The extend method uses inheritance in the Ember.js framework. The Light object inherits all the methods and bindings of the Ember object.

The create method also inherits from the Ember object class and returns a new instance of this class. The bulb object is a new instance of the Ember object that we created.

There's more...

To use the previous examples, we can create our own module and import it to our project.

  1. To do this, create a new file in the app folder called MyObject.js:
    // app/myObject.js
import Ember from 'ember';
export default function() {
    const Light = Ember.Object.extend({
      init(){
        alert('The isON property is defaulted to ' +this.get('isOn'));
      },
      isOn: false
    });

    Light.reopen({
      color: 'yellow'
    });

    Light.reopenClass({
      wattage: 80
    });

    const bulb = Light.create();

    console.log(bulb.get('color'));
    console.log(Light.wattage);
}

    This is a module that we can now import to any file in our Ember application.

  2. In the app folder, edit the app.js file. You'll need to add the following line at the top of the file:
    // app/app.js
import myObject from './myObject';
  3. At the bottom, before the export, add this line:
    myObject();

    This will execute the myObject function that we created in the myObject.js file. After running ember server, you'll see the isOn property defaulted to a false popup message.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset