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

At this point, we have several slightly differing dynamic expressions in our templates, so let’s stop for a moment to explore them.

Let's first take a look at the `songs.hbs` template and go from top to bottom:

{{!-- app/templates/bands/band/songs.hbs --}}
{{page-title "Songs | Rock & Roll with Octane" replace=true}}

{{#if @model.length}}
  <ul>
    {{#each @model as |song|}}
      <li class="mb-2">
        {{song.title}}
        <span class="float-right">
          <StarRating
            @rating={{song.rating}}
            @onUpdate={{set song "rating"}}
          />
        </span>
      </li>
    {{/each}}
  </ul>
{{else}}
  <p class="text-center">
    The band has no songs yet.
  </p>
{{/if}}

`#if` and `#each` are basic Ember helpers. You’ll see helpers in more detail and make your own in the [Helpers](https://www.educative.io/collection/page/10370001/4603037207756800/6019909199331328) chapter.

`@model` denotes an argument that was passed into this context and is immutable. This is also known as a named argument. In this case, it's the `model` returned from the corresponding route and the "passing in" happens invisibly, behind the scenes.

The `#each` helper provides a so-called block variable between pipes. In our case, it provides `|song|`. The variable only lives within the block, so it’s similar to `let` declarations in JavaScript.

`<StarRating>` is a **component invocation**. Component arguments need to be prefixed with `@` upon calling them. `@rating` and `@onUpdate` are the arguments we're passing in.

The `set` in `{{set song "rating"}}` is again a helper, implemented by the `ember-set-helper` add-on.

Since a few concepts don't appear in this file, let's now open the component's template, `star-rating.hbs`:

In this lesson, you’ll learn to use expressions in templates of 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

Expressions in Templates