Debugging Ember

(without tears)

@vaidehijoshi

community

Debugging

It's hard.

And frustrating.

Maybe I should give up?​

get       stuck

let's debug together!

Bug #1

😮

narrow down the             of the problem

scope

the view

<h3>Recipes</h3>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Date</th>
    </tr>
  </thead>

  <tbody>
    {{#each sortedRecipes key='id' as |recipe|}}
      <tr>
        <td>
            {{#link-to 'recipe' recipe}}{{recipe.name}}{{/link-to}}
        </td>
        <td>
            {{time-format recipe.published_at 'l'}}
        </td>
      </tr>
    {{/each}}
  </tbody>
</table>

<hr>

<button {{action "newRecipe"}}>New Recipe</button>

{{#link-to 'recipe' recipe}}
    {{recipe.name}}
{{/link-to}}

it's not the view.

// router.js

import Ember from 'ember';

Router.map(function() {
  this.route('recipe', { 
    path: '/recipe/:id' 
  });
});

// recipe.js

import Ember from 'ember';

export default Ember.Route.extend({
});

what does our route have access to?

             does it get access to it?

// recipe.js

import Ember from 'ember';

export default Ember.Route.extend({




});

// model hook!

model(params) {


    return this.store.find('recipe', params.id);
}

and when we refresh:

in our ember inspector:

import Ember from 'ember';

export default Ember.Route.extend({
  // model(params) {
    // return this.store.find('recipe', params.id);
  // }
});

so.

where did we start?

1/

2/

documentation is our friend.

our route never knew how to get its model!

model hooks don't

fire when using

link-to helpers

Bug #2

Ember Meetup

Party Supplies

Party Supplies

1. Avocados

2. Pepper Jack Cheese

why are our model properties wrong?

where do model properties come from?

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.find('grocery-list', params.id);
  }
});

import Ember from 'ember';

export default Ember.Controller.extend({
  name: null,
  items: null
});

Party Supplies

1. Avocados

2. Pepper Jack Cheese

our controller had values set at least once.

             does a controller get its properties from?

where

// grocery-list.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.find('grocery-list', params.id);
  },

  setupController(controller, model) {
    this._super(controller, model);
  }
});

setupController(controller, model) {
    this._super(controller, model);

    controller.setProperties(
      model.getProperties([
        'name',
        'items'
      ])
    );
}

Ember Meetup

Party Supplies

Ember Meetup

Tomster food!

we never told our controller to set its properties!

controllers are singletons

persisted state

controllers are singletons

Bug #3

what do we have

              to?

access

{{recipe-editor recipe=model afterDestroy='afterDestroy'}}

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.find('recipe', params.id);
  },

  actions: {
    afterDestroy() {
      this.transitionTo('recipes');
    }
  }
});

<button {{action 'deleteRecipe'}}>
    Delete
</button>

import Ember from 'ember';

export default Ember.Component.extend({
    recipe: null,

    saveRecipe() {
        // logic to save recipe
    },

    deleteRecipe() {
        const recipe = this.get('recipe');

        if (confirm('Are you sure?')) {
            recipe.destroyRecord().then(() => {
                afterDestroy();
            });
        }    
    }
});

{{recipe-editor recipe=model afterDestroy='afterDestroy'}}

deleteRecipe() {
    const recipe = this.get('recipe');

    if (confirm('Are you sure?')) {
        recipe.destroyRecord().then(() => {
            afterDestroy();
        });
    }    
}

afterDestroy();

👎

deleteRecipe() {
    const recipe = this.get('recipe');

    if (confirm('Are you sure?')) {
        recipe.destroyRecord().then(() => {
            this.sendAction('afterDestroy');
        });
    }    
}

// recipe-editor/template.js

<recipe-editor recipe=model destroy={{action 'afterDestroy'}}>

// recipe-editor/component.js

export default Ember.Component.extend({
  actions: {
    deleteRecipe() {
      const recipe = this.get('recipe');

      recipe.destroyRecord().then(() => {
         this.attrs.destroy();
      }
    }
  }
});

angle-bracket way!

actions are fired on our current context

developing with ember:

understand what's happening in our code?

getting stuck.

code's

point of view

frustrated

Thanks!

@vaidehijoshi