rarwe.tar.gz

Ember

Ember-copy

ember2

embercss

rarwe

Ember-copy-5yvdqv

Ember-copy-5yvdqv-copy

Ember-Acceptest

Ember-Acceptest-copy

Ember-unitest

rarwe-copy

Ember-Acceptest-challenge

Ember-helper-challenge

In this course, you begin with an introduction to Ember.js, a JavaScript framework for building client-side applications.

After that, the course guides you through the steps of building a real application so that you can see how the concepts are applied in practice. You'll learn about the building blocks of Ember one by one, in a way that crushes the allegedly steep learning curve of the framework.

The application will get shinier (and/or more robust) with each chapter. By the end, we will have a decent app, and you'll have a great new skill you can add to your resume.

Developing Robust Ember.js Applications

# Defining the component's properties

The first step is to use an Ember-CLI generator to create a new component with the following command:
```
ember g component star-rating --with-component-class
```

Run the terminal widget below to see the output of the above command.

By default, the command only creates the component’s template, which is a `.hbs` file, so we also passed in the `with-component-class` flag to have a `.js` file created. They are both added in the app’s `app/components` folder. Alternatively, you can run `ember g component-class star-rating` to create just the JavaScript file.

Components extend the `Component` class defined in the `@glimmer/component` module. In other words, we created a Glimmer component, which is a modern, light-weight alternative to Ember components (extending `@ember/component`) and is the default component type in Octane projects. In the class definition in the JavaScript file, the component should define its properties, methods, and actions.

Let's think a bit about what we need to display in the template. Taking in the `rating` and `maxRating` arguments, we'll need to show full stars up to `rating` and then display empty stars for the rest. Use `maxRating - rating` to save off-by-one errors. A handy way to do this is by defining a property, an ES6, to be precise:

In this lesson, you’ll learn how to create and implement the component for our Ember application.

Implementing the Component

Implementing the Component

Defining the component’s properties