visualjeff

Ember Component Learnings:
==========================
Don't ever assign a dynamic value to a id or name attribute of a field
Don't share state between components.  Always reset or init properties via the init method.  Same for mixins.

Warning:
========
Because components are sealed from outside events.  It challenging to 
get them to refresh on command.  To pull this off you essentially need
 them to observe a property on a controller in order to get them to refresh.

visualjeff

JSONAPI - Kabab case only.  No camel case
	data
	  type (plural)
	  id (string of a number)
	  attributes (payload)
	  relationships (minial JSONAPI form inside.  Type (can be singular or plural) and id.  can also be an Array)
	  links (optional but ember-data does support links)
	included (optional.  Type, id and attributes.  Always an Array)

====================================================================

visualjeff

Ember Data Notes:

Serializers

Either you are:
1. deserialization - data from the server, extract then normalize
2. serialization - Sending data to the server

You can define an alternate primary key in the serializer:

visualjeff

Higher order functions:
.forEach() - Iterates over a set
.map() - Projects a set
.filter() - Narrows down a set based on the predicate
.find() - Returns the first match in a set based on the predicate
.any() - Returns true if match is found based on the predicate
.every() - Returns true if match is found for all elements in the set (predicate also)

Stop using switch, for and while loops!

visualjeff

Mirage cheatsheet:
1. Install Mirage: ember install ember-cli-mirage
2. Set namespace in mirage/config.js
3. Set route handler in mirage/config.js
4. Generate mirage model.   ember g mirage-model <model_name>
5. If you not using JSONAPI.  Customize your mirage serializer
6. Seed the database:  ember g mirage-fixture <fixture_name>
7. Remove senarios directory.  It prevents fixtures being load.  rm -rf senarios
8. Refactor to use shorthands where possible.

visualjeff

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function() {
    this.set('options', {
      // the element holding pannable content area
      contentEl: Ember.$(this.element).find('.ptr-content')[0],

      // the element holding pull to refresh loading area
      ptrEl: Ember.$(this.element).find('.ptr-indicator')[0]

visualjeff

position: fixed; 
bottom: 0;
left: 0;
right: 0;
height: 50px;

NOTE: While this is an easy fix.  Its doesn't work so well with Ember.
Also there are trade offs.  Mobiles apps will be forced to scroll out of the gate.

visualjeff

sudo npm install typings --global
typings search --name node
typings install env~node --global --save

Then I added the following to the top of my index.js file.

/// <reference path="typings/index.d.ts"/>

visualjeff

pathForType: function(type) {
  type = this._super(...arguments);
  if (type === 'building-types') {
    type = type.camelize(); //Node API is expects a camelized path for this api signature. i.e., buildingTypes
  }
  return type;
},

visualjeff

urlForDeleteRecord(id, modelName, snapshot) {
    return this._super(...arguments) + `?rev=${snapshot._attributes.rev}`;
}