Debugging Ember

With Empathy

@vaidehijoshi

Empathy


Debugging

๐Ÿž

๐Ÿ

It's hard.

And frustrating.

Maybe I should give up?โ€‹

Empathize

think like your code

Bug #1

๐Ÿ›

๐Ÿ˜ฎ

<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}}
// router.js

import Ember from 'ember';

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

dynamic segment

// recipe.js

import Ember from 'ember';

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

    return this.store.find('recipe', params.id);
}
import Ember from 'ember';

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

so,

what's different?

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

model hooks don't

fireย when using

link-to helpers

๐Ÿ›

Bug #2

๐Ÿœ

Party List

1. Avocados

2. Pepper Jack Cheese

๐Ÿ˜ฑ

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 List

1. Avocados

2. Pepper Jack Cheese

// 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'
      ])
    );
}

EmberConf List!

1. Tomster food

controllers are singletons

๐Ÿœ

controllers are singletons

routeable components!

Bug #3

๐ŸŒ

๐Ÿ˜ญ

{{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();
        });
    }    
}
this.afterDestroy();

this.sendAction('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

ย 

๐ŸŒ

Computers

ย ยฏ\_(ใƒ„)_/ยฏย 

machine

=

human

code's

point of view

Be a little kinder.

๐Ÿ’–

Thanks!

@vaidehijoshi

๐Ÿž

Made with Slides.com