How to unload ALL models in Ember-Data - ember.js

Ember-Data Store has unloadAll method for unloading records for given type. How to unload records for all types?

Great question #jaaksarv. According to the Ember Core team, one would use the App.reset() method to:
Clear all the data in the Ember container.
Rebuild the container anew and then route back to the URL.
See
Ember Discussion on the matter and for a more complex options see the how-to on the API Docs.

Related

EmberJS "detail" page fetches the model automatically - is this normal?

Long time reader - first time questioner here.
I am developing a medium sized application in EmberJS which is a framework that I have been using for a while.
Today I have realised that it fetches model data from the server without me writing any code.
I have a main route called "students". Then there is a "list" sub route where the model() function of this route calls the store to fetch all the students and lists them on a table.
On each row of this table I link to another sub route called "detail" where it accepts the ID of each student as an argument. However inside the route.js file for this route there is no model() function querying any information about the specific student from the server.
Ember does this automatically somehow as I can see the appropriate network request being made using chrome dev tools.
How is this happening and is it normal?
Thank you in advance.
The Ember router will automatically load a model if it detects a dynamic segment that ends in _id.
Ember follows the convention of :model-name_id for two reasons. The first reason is that Routes know how to fetch the right model by default, if you follow the convention
You mentioned that your api route is /api/student/details/:student_id and I would expect that your ember route is fairly similar.
It detected _id, and called store.find('student', params.student_id) automatically for you when you navigated to that route.
This is completely normal, and is one of the ways Ember encourages you to follow convention - If you do, you don't have to create as much boilerplate.
If you want to avoid the second request, possibly because the list route pulls all relevant data, you can pass the student model instead of the student id.

Elesticsearch and Emberjs

I'm trying to wire EmberJS with ElasticSearch. So far, I've read most of the Ember documentation, and found out this adapter for ElasticSearch.
The problem is I can't figure out how to use it (i.e. configure it so that when I call store.save(), my model is sent to ES.
What I have ATM is a newly created project with Ember generator (ember new ), and a generated controller, router, model, etc. My problem is that the Ember document explains how to customise adapters, but not how to use them (or I missed that part). The ES adapter's documentation says :
var App = Em.Application.create();
App.store = DS.Store.create({
revision: 4,
adapter: DS.ElasticSearchAdapter.create({url: 'http://localhost:9200'})
});
which implies to create a Store, whereas I can only see ways to extend it in the Ember documentation. Furthermore, I already have a Store in my application.
So the questions are:
do I need to override the store creation to replace it with the ES one (and where to do that) OR
do I need to extend the existing one, and in this case, how should I do that ?
Also, when it says:
First, load the ember-data/lib/adapters/elasticsearch_adapter.js file
in your application.
where and how that should be done ?
On your first questions/s
do I need to override the store creation to replace it with the ES one
(and where to do that) OR do I need to extend the existing one, and in
this case, how should I do that ?
You're onto the right track in the second part, you will need extend the existing one, but not the store, the adapter in this case.
So if you're using ember-cli, which according to this:
What I have ATM is a newly created project with Ember generator (ember
new )
It seems that you are and so you'll application folder structure should be like this:
app ->
adapters(you need to generate/create this)
components
controllers
models
routes
serializers
services
styles
templates
And now we can answer:
how should I do that ?
If you do not have the adapters folder yet, which you probably don't, just run ember generate adapter application or create a folder adapters, and a file application.js for that folder.
And that then finally leads us to a part of your last question.
load the ember-data/lib/adapters/elasticsearch_adapter.js file in your
application. where and how that should be done ?
import ElasticSearchAdapter from 'ember-data/lib/adapters/elasticsearch_adapter'
export default ElasticSearchAdapter.extend({
})
Now the possible bad news, that adapter is likely very outdated, as it the repository's last commit was 27 Dec 2012.

Force Ember-Data to reload belongsTo/hasMany relationships on find

How can I tell ember-data to also reload the related entities?
When I run the the following for the second time it will nicely reload the posts, but will not reload the belongs/hasMany relationships (Which were loaded on the first time).
model: function() {
return this.store.findAll('posts',{reload:true});
},
I know there are many scenarios where this is wanted, but in my scenario the related entities can have changed.
Implement a socket.io service notifiying me of changes isn't an option as I don't have enough control of the server.
Note: I'm on Ember 2.0.0 and Ember-Data Canary
There seems to be no inbuilt solution, only workarounds.
e.g. call
store.unloadAll('typeOfRelationship');
before calling findAll

Ember.js change route without page reload

I am planning an Ember web app which I want to operate on one page without page reloads.
However, I also want to be able to share the state of the app at any time, and therefore make use of Ember's URL-centric design.
As a total Ember noob, I am wondering if and how Ember accomplishes this (relying on routes, but without page reloads).
Any info is greatly appreciated!
I would recommend reading up on "Query Parameters" (see here) as that is the feature it sounds like you are looking for.

How to communicate data between controllers in Ember.js?

I am in the painfully slow process of learning Ember and find the guides and documentation severely limited when it comes to non-trivial examples.
To my question now.
Given the following router definition:
App.Router.map(function () {
this.resource('home', function() {
this.resource('weather', function() {
this.route('site', {path: '/:weather_site'});
});
});
When the user enters the home.weather.index route the model hook executes and fetches all weather information from the server. When the user then enters home.weather.some_site the model hook of the new route would bring weather data for that particular site from the server. How can this redundancy be prevented? In other words, how can controllers communicate data to each other? Should I use the setupController hook in each Route to achieve this or are there better ways?
Are there any good resources to help me understand the data flow in and out of Ember? Are there any good resources to help me learn Ember faster than digging into the source?
How can this redundancy be prevented?
It's not clear if/how/why the model hook for home/weather/index would fetch all weather information from the server. If that's desired behavior, then totally agreed there is no reason to fetch the same data when user enters home/weather/site.
If you are using ember-data there should be no redundancy since:
when user visits home/weather/index App.Site.find() fetches all weather data
when they visit home/weather/site App.Site.find(weather_site) returns site from cache and does not make a new request to the server
if user visits home/weather/site directly (or refreshes browser) then App.Site.find(weather_site) will call server and fetch just data for that site.
So unless there is something I'm missing there is no redundancy to prevent.
In other words, how can controllers communicate data to each other?
Seems unnecessary, but since you ask: Controllers communicate with one another via bindings. You declare a dependency from one controller to another via the controller's needs property, then Ember inject's a that dependency automatically. See the ember guide dependencies-between-controllers for more on how this works.
Should I use the setupController hook in each Route to achieve this or are there better ways?
That shouldn't be necessary in this case.
Are there any good resources to help me understand the data flow in and out of Ember?
Not clear what you mean by data flow. Best guess is that you'd learn a lot from Luke Melia's gothamjs presentation
Are there any good resources to help me learn Ember faster than digging into the source?
Reading the source is always a good option, but there are many other resources. I recommend checking out embercasts and ember weekly