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

## Output "ASCII stars"
We now have the necessary supporting code for rendering our star-rating widget. The next step is to lay out in the template what should be rendered. Just to see that it works, let’s output “ASCII stars” as a first step: "X"s for full stars, and "O"s for empty ones. The newly added lines of code are highlighted, and the removed lines of code are commented.

{{!-- app/components/star-rating.hbs --}}

{{!-- {{yield}} --}}
{{#each this.stars as |star|}}
  {if star.full "X" "O"}}
{{/each}}

The above use of `if` is called **in-line if**. It’s the equivalent of the JavaScript ternary operator `?`. It takes an expression as its first parameter. If it’s true, it returns the second parameter. If it is false, it returns the third one.

For our glorious component to be rendered on screen, we still have to invoke it. In the songs template, we switch the simple display of `song.rating` to calling the component with that same rating:

The newly added code is highlighted, and the removed code is commented.

# Output "ASCII stars"
We now have the necessary supporting code for rendering our star-rating widget. The next step is to lay out in the template what should be rendered. Just to see that it works, let’s output “ASCII stars” as a first step: "X"s for full stars, and "O"s for empty ones. The newly added lines of code are highlighted, and the removed lines of code are commented.

In this lesson, you’ll learn how the components are rendered in an Ember application.

Course Overview

Getting Started with Ember

Templates and Data Bindings

Routing

Nested Routes

Components

Controllers

Building a Catalog

Talking to a Backend

Advanced Routing

Testing

Query Params

Loading and Error Substates

Helpers

Conclusion

Appendix

Rendering the Component

Output “ASCII stars”