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

Since we are talking about router subtleties in this chapter, let's see a rookie trap. 

Make the following tiny change in the band-list component template:

{{!-- app/components/band-list.hbs --}}
<ul class="pl-2 pr-8">
  {{#each this.bands as |item|}}
    <li class="mb-2">
      <LinkTo
        class={{if item.isActive "border-purple-400 border-l-4 pl-2"}}
        @route="bands.band"
         {{!-- @model={{item.band.id}} --}}
         @model={{item.band}}
      > 
        {{item.band.name}}
      </LinkTo>
    </li>
  {{/each}}
</ul>

Instead of passing the `id` of each band to the `LinkTo`, we pass the band object itself.

Everything keeps working as before, yet there’s something strange going on. If you put a breakpoint in the `bands.band` route’s model hook, you’ll find that when you click the `LinkTo` we just changed or any of the band links, the breakpoint is not hit! The model hook is simply not called.

At the same time, if you start the application on the `bands/pearl-jam` URL, execution will stop at the breakpoint, as expected.

This is due to the following:

If the route has a dynamic segment  and the context object is passed in, the model hook is skipped! In our case, `bands.band` has `id`, and the object is the band object.

This might trip up a lot of people, but in a way, it makes sense. The main role of the model hook is to fetch the model object for the subsequent template rendering. If the model object is already known before starting the transition, there is no need to run the possibly time-consuming function.

Having said that, this behavior can be very confusing, and there is currently an RFC (Request For Comments), a proposal to change behavior, to always run the model hook, no matter what is passed in.

Another way to skip the model hook is from "application code," using one of the transition methods: `router.transitionTo, router.replaceWith` or the appropriate methods on routes and controllers.

The takeaway is that you shouldn't place any code in the model hook of routes with a dynamic segment that you expect to be run every time, regardless of how the route was transitioned to.

Better still, you simply shouldn’t use a context object in links and manual transitions. Instead, use the object’s expected property, which is a unique identifier in most cases. Let’s revert the small change we’ve made:

Here, you’ll learn about a rookie trap in Ember.js by making little changes in our 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

Model Resolution