Ember Cheatsheet

01. REST Adapter for Cross Domain Access

	// store.js
	App.Adapter = DS.RESTAdapter.reopen({
	bulkCommit: false,
	url: 'http://localhost:5000',
	namespace: 'api',
	corsWithCredentials: true,
	headers: {
	'Accept': 'application/vnd.vendor+json;version=1',
	'Content-type': 'application/json',
	'x-vendor-appid': '123',
	'x-vendor-secret': '12345'
	},
	ajax: function(url, type, hash) {
	if (this.headers !== undefined) {
	var headers = this.headers;
	if (hash) {
	hash.beforeSend = function (xhr) {
	Ember.keys(headers).forEach(function(key) {
	xhr.setRequestHeader(key, headers[key]);
	});
	};
	}
	}
	return this._super(url, type, hash);
	}
	});
	// Add maping and extra configuration here before you create the object
	App.Store = DS.Store.extend({
	adapter: App.Adapter.create()
	});
	App.store = App.Store.create();

view raw
RESTAdapter.js
hosted with ❤ by GitHub

02. Hello World
https://www.ludu.co/course/ember

03. Redirect Ember 2.0
// app/routes/index.js
import Ember from ’ember’;

export default Ember.Route.extend({
beforeModel() {
this.transitionTo(‘products’);
}
});

02. Run .ru file for https://www.toptal.com/javascript/a-step-by-step-guide-to-building-your-first-ember-js-app
./server.ru;

03. Multiple models for a Controller

model : function() {
  return Ember.RSVP.hash({
    users: this.store.find('User'),
    customers: this.store.find('Customer')
  });
},

setupController: function(controller, model) {
  controller.set('model', model.users);
  controller.set('customers', model.customers);
}

04. Creating and Handling Controller Vars

In the Controller

App.ArtistsController = Ember.ArrayController.extend({
  newName: '',
  disabled: function() {
    return Ember.isEmpty(this.get('newName'));
  }.property('newName')
});

In the Route

App.ArtistsRoute = Ember.Route.extend({
  ...
  actions: {
    createArtist: function() {
      var name = this.get('controller').get('newName');

      Ember.$.ajax('http://localhost:9393/artists', {
        type: 'POST',
        dataType: 'json',
        data: { name: name },
        context: this,
        success: function(data) {
          var artist = App.Artist.createRecord(data);
          this.modelFor('artists').pushObject(artist);
          this.get('controller').set('newName', '');
          this.transitionTo('artists.songs', artist);
        },
        error: function() {
          alert('Failed to save artist');
        }
      });
    }
  }
});

05. An adapter (RESTful) for each model

App.PostAdapter = DS.RESTAdapter.extend({
  namespace: 'api/v2',
  host: 'https://api.example2.com'
});

App.PhotoAdapter = DS.RESTAdapter.extend({
  namespace: 'api/v1',
  host: 'https://api.example.com'
});

06. Artists via Rest Call

App.ArtistsRoute = Ember.Route.extend({
  model: function() {
    var artistObjects = [];
    Ember.$.getJSON('http://localhost:9393/artists', function(artists) {
      artists.forEach(function(data) {
        artistObjects.pushObject(App.Artist.createRecord(data));
      });
    });
    return artistObjects;
  }
});

07. Get the model from a controller

var model = this.store.modelFor('form','new-latte-form');

08. Calling transitionTo from a route or transitionToRoute from a controller will stop any transition currently in progress and start a new one, functioning as a redirect. transitionTo takes parameters and behaves exactly like the link-to helper:

{{#link-to "index"}}Home{{/link-to}}

After Model is loaded

App.Router.map(function() {
  this.resource('posts');
  this.resource('post', { path: '/post/:post_id' });
});

App.PostsRoute = Ember.Route.extend({
  afterModel: function(posts, transition) {
    if (posts.get('length') === 1) {
      this.transitionTo('post', posts.get('firstObject'));
    }
  }
});

Before Model the default method

App.Router.map(function() {
  this.resource('posts');
});

App.IndexRoute = Ember.Route.extend({
  beforeModel: function() {
    this.transitionTo('posts');
  }
});

09. RESTAdapter

# a model definition
App.Person = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName:  DS.attr('string'),
  isPersonOfTheYear: DS.attr('boolean')
});

# a json returned (REST) from server should like
{
  "person": {
    "firstName": "Barack",
    "lastName": "Obama",
    "isPersonOfTheYear": true
  }
}

10. Singleton Service: Audio Player
https://guides.emberjs.com/v1.10.0/understanding-ember/dependency-injection-and-service-lookup/

11. Ember Data Model maker
http://andycrum.github.io/ember-data-model-maker/

12. Obtain the jQuery object from an ember component
http://emberjs.com/api/classes/Ember.Component.html#method__
Ember.inspect(this.$(‘input’)[0]);

13. Rest Client for Chrome
https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo