Ember ApplicationRoute with other Routes - ember.js

I have a basic ember question here. I'm looking to set up an ember ApplicationRoute that gets loaded immediately, and have all other routes extend from this application route. I would like the data that the ApplicationRoute loads to be loaded on every page transition. Is this possible? FYI I'm also using ember-data and rails as an API.
Thanks!

If you want a real time data pushed from a server you should try extending your ApplicationAdapter to handle data from websocket connection and push in to the store object. A nice example of parsing model data from websocket connection may be found in API docs http://emberjs.com/api/data/classes/DS.RESTSerializer.html#method_extract

Related

How to unload a record in Ember 2.3.0?

I am upgrading an Ember 1.13.0 application to Ember 2.3.0 and I'm facing a little issue where I am unable to unload a record from the Data Store without causing Ember to make a HTTP request. I do not want to delete the record in the server. I simply want to remove it from Ember Data Store.
I was using the following Ember DS.Store API: http://emberjs.com/api/data/classes/DS.Store.html#method_unloadRecord in Ember 1.13.0 and it worked fine. Sample:
this.store.find('post', 1).then(function(post) {
this.store.unloadRecord(post);
});
After upgrading to 2.3.0, when I monitor the network tab in Chrome, Ember is making a GET request to find the record and then unload it. Because it fails to find (our server does not have an API to match this call), it doesn't unload the record and the changes don't appear in the UI.
I tried to fix this by instead doing something like:
this.store.peekRecord('posts', 1).then(function(post) {
this.store.unloadRecord(post);
});
but this doesn't seem to work. What is the right way to unload a record from Ember Data without making HTTP calls? Thanks.
Ember data automatically reloads records to keep them in sync with server. So findRecord() resolves immediately, but in background it makes request to the server and update values when it returns. This behavior was changed in ember-data 1.13.0 and is described in toc_new-adapter-hooks-for-better-caching.
The issue with peekRecord is that peek* methods just asks store and thus don't need to return promise. Therefore your code should look like this:
const store = this.get('store');
const post = store.peekRecord('posts', 1);
if (post) {
store.unloadRecord(post);
}

No persistent data on Firefox OS using ember-localforage-adapter

I've got an issue with using this adapter.
I'm a noob in Ember, so it might be (and probably is) my error...
Ember 1.13.8
Ember Localforage Adapter 1.13.1
Adding an entry is fine - adapter is called.
Adapter isn't called when the application is started.
Data is missing when an app is reloaded.
https://github.com/zalun/stereophoto/tree/master/ember-stereophoto
You are using peekAll to retrieve all the models in your stereos/index route but in the adapter of localforage peekAll is not overwritten (which means that its behaviour hasn't been changed from its original one in ember-data). You should use findAllinstead.

Custom Ember Api Endpoint

I am trying to figure out how to get data from a custom api. I am using Ember 1.8.1, Ember Data 1.0.0-beta.12 and Ember CLI
In my router i have the following resource
this.resource("communities", {path: '/communities/:community-id/follow-ups'}, function() {});
I have my model defined for the correct response. In my communities router I am trying to get the data from the api like so
this.store.find('community', params['community-id']);
The problem I am having is that I am trying to retrive data from the api endpoint
/communities/{community-id}/follow-ups
But the app is trying to grab the data from
/communities/{community-id}
How do I define the custom resource route to pull from the follow-ups
The router path isn't going to change where the API makes the call to, that just helps Ember change the browser path.
You might want to consider using an adapter if you really need it to hit .../follow-ups.
You'd want to make a CommunitiesAdapter I think. ember g adapter communities, or community, not sure offhand.
And I think the function on it you're looking for is pathForType.
Check it out at http://guides.emberjs.com/v1.10.0/models/customizing-adapters/
You can create a custom adapter for your model in particular but deep nesting on routes can be tricky in Ember and not worth the time if you are in a rush.
Try setting the model of the route directly with a get json
App.NAMERoute = Ember.Route.extend({
model : function(params){
return Ember.$.getJSON(window.apiHost+'/communities/'+params.group_id+'/follow-ups');
}
});
Sometimes simple solutions is what you need

How do I access the URL that Ember Data will PUT to?

I'm adapting an old JS (no framework) + Rails app as an Ember learning exercise. The idea of the application is that I'm producing a pdf from some data input. In the initial version, there was no user persistence - you could modify the data provided to you in the tables, and then download the PDF of it.
As part of this, I decided to run with a decidedly non-standard ember framework - I'm essentially using Ember Data to load the initial value of the tables. Ember has been a really natural fit for the models I have on the Rails side, and it's made a lot of the more complicated calculations a lot easier. The issue I have is that my initial idea was that when I came to download the PDF, I'd respond to the "save" action on Ember Data with binary data (with an application/pdf header), which I could then use something like FileSaver.js to serve up to the client. Then, I found that EmberData needs JSON return value.
So I base64 encoded my PDF response and fired it back..but it didn't fit the model schema. I thought I'd then do a manual AJAX save -
CalculateYourTV.RostersShowController = Ember.ObjectController.extend({
actions:{
download: function(){
var roster = this.get("model");
var team = roster.get('team');
return this.ajax('*URL GOES HERE*', record.toJSON(), "PUT").then(function(data) {
console.log('called')
console.log(data)
});
},
}
})
And this is where I'm currently stuck. Is there any way to access the URL that EmberData is posting to? I could hard-code a route in the Rails side of things, but I don't like hardcoding routes in here, and I'd like to keep it as reusable as possible (I'm planning to eventually allow data persistance).
Just open chrome dev tools (or firebug) and monitor what's going on in the network tab. You should see any ajax request your application sends out, including the EmberData's save request.
You can change the URL that a specific model will hit by creating custom Ember Data adapters per model.
For example, say you have a person model that needs to not hit the default /persons URL.
App.PersonAdapter = App.ApplicationAdapter.extend({
pathForType: 'special/custom/endpoint/for/folks'
});
That said, Ember Data may not be the best tool here for your PDF "model". You can always use Ember Data for the majority of your models, but use a quick $.ajax for other stuff that doesn't fit your definition of a true model.
You can ask the adapter to build a URL for you -
adapter = #store.adapterFor('application')
url = adapter.buildURL(type, id)
where type is the name of the model, and id is its id.
If want to look up the adapter directly in the container it is
#container.lookup('adapter:application')

Delaying route change until data is loaded in Ember

In Angular the $routeProvider resolve property allows delaying of route change until data is loaded. Given the route model hook in Ember returns a promise I was wondering how that stuff was done in Ember
Here it's what I mean in angular Delaying AngularJS route change until model loaded to prevent flicker
A link with a sample code would be great
Just recently this PR introduced Async transitions to ember.js. With this change you can do all sort of things, like for example delaying a route's transition if data is still underway. A route has now all sorts of hooks available to do just want you want.
As an example (taken from the gist mentioned below) in the afterModel hook you could do something like this to only transition to the post.show route if you actually have data:
App.PostsIndexRoute = Ember.Route.extend({
afterModel: function(posts, transition) {
if (posts.length === 1) {
this.transitionTo('post.show', posts[0]);
}
}
});
Since this new features are still very young you need to use the latest master to have it available. For more info on how to use the API please see this gist.
Hope it helps