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(); |
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