Reload current route's model without Ember Data - ember.js

Ember Data has a reload method; I'm using a more basic approach (using Ember objects) to serve up my models, though.
I'd like a user to be able to reload the model for the current route via an action when e.g. a button is clicked. Is this possible without Ember Data?

Here is a really simple example of how I do it w/ your approach (notice the "clear").
You could invoke clear+find from your route / controller / whatever. I've also added a "beforeSend" to the $.ajax in some of my bigger apps (this will invoke the clear for you before the xhr is resolved)
App.Person.reopenClass({
people: Ember.A([]),
clear: function() {
this.people = Ember.A([]);
},
add: function(hash) {
var person = App.Person.create(hash);
this.people.pushObject(person);
},
remove: function(person) {
this.people.removeObject(person);
},
find: function() {
var self = this;
$.getJSON('/api/people', function(response) {
response.forEach(function(hash) {
var person = App.Person.create(hash);
Ember.run(self.people, self.people.pushObject, person);
});
}, this);
return this.people;
}
});

The issue was the async nature of the AJAX call I was making.
This didn't work:
this.set('model', App.MyObject.findAll(value));
I needed to allow the AJAX call to return the response, then populate the model:
var that = this;
App.MyObject.findAll(value).then(function(response) {
that.set('model', response);
});

Related

Ember: How to cleanly replace model data and have progress indicators

I have a certain route that shows a list of projects, and it gets initial data from my RESTAdapter based on who the user is.
I am now implementing a search function that will issue a new API call so the user can get records besides the default ones for them, and the response should replace the model for that route. I have all that working, but I'm not sure how to do a loading or progress indicator (as the response from the database could potentially take 5-10 seconds depending on the amount of data). I know about loading substates, but in this case I'm not transitioning between routes. I just want to have at minimum a spinner so the user knows that it's working on something.
Would anyone that's done this before be willing to share how they handled a)replacing the model with new data, and b)keeping the user informed with a spinner or something?
Form action called when user clicks the Search button
searchProjects: function() {
var query = this.get('queryString');
if (query) {
var _this = this;
var projects = this.store.find('project', {q: query});
projects.then(function(){
_this.set('model', projects);
});
}
}
a) replacing the model with new data
You don't need to do anything. If you sideload records properly from the backend, Ember will automatically update them on the frontend.
b) keeping the user informed with a spinner or something
The loading substate is an eager transition. Ember also supports lazy transitions via the loading event.
You can use that event in order to display the spinner.
Here's an example from the docs:
App.ApplicationRoute = Ember.Route.extend({
actions: {
loading: function(transition, route) {
showSpinner();
this.router.one('didTransition', function() {
hideSpinner();
});
return true; // Bubble the loading event
}
}
});
UPD1
I need to do at least what I'm doing right? Setting the model to the response?
You need to reflect the search in the URL via query params. This will let the router automatically update the model for you.
what I would put in showSpinner to affect stuff on the page (like, can I use jQuery to show or hide a spinner element?), or show the actual loading substate.
I would set a property on that page's controller:
App.IndexRoute = Ember.Route.extend({
queryParams: {
search: {
refreshModel: true
}
},
model () {
return new Ember.RSVP.Promise( resolve => setTimeout(resolve, 1000));
},
actions: {
loading (transition, route) {
this.controller.set('showSpinner', true);
this.router.one('didTransition', () => {
this.controller.set('showSpinner', false);
});
return true;
}
}
});
App.IndexController = Ember.Controller.extend({
queryParams: ['search'],
search: null,
showSpinner: false,
});
Demo: http://emberjs.jsbin.com/poxika/2/edit?html,js,output
Or you could simply put the spinner into the loading template, which will hide obsolete data:
http://emberjs.jsbin.com/poxika/3/edit?html,js,output
Or you could put your spinner into the loading template:
Just in case others want to see, here's my working code based on #lolmaus's answers.
These Docs pages were helpful as well
Route's queryParams and Find method
Controller
//app/controllers/project.js
export default Ember.ArrayController.extend({
queryParams: ['q'],
q: null,
actions: {
searchProjects: function() {
var query = this.get('queryString');
if (query) {
this.set('q', query);
}
}
}
})
Route
export default Ember.Route.extend(AuthenticatedRouteMixin, {
model: function(params) {
if (params.q) {
return this.store.find('project', params);
} else {
return this.store.findAll('project');
}
},
queryParams: {
q: {
refreshModel: true
}
},
actions: {
loading: function(/*transition, route*/) {
var _this = this;
this.controllerFor('projects').set('showSearchSpinner', true);
this.router.one('didTransition', function() {
_this.controllerFor('projects').set('showSearchSpinner', false);
});
return true; // Bubble the loading event
}
}
});
My issue now is that when I use the parameter query, it works great, but then if I clear the query (with an action, to effectively "go back") then the records fetched by the query stay in the store, so when it does a findAll() I have both sets of records, which is not at all what I want. How do I clear out the store before doing findAll again?

Ember data side loading with JSONAPI

The request generated for my route is http://api.myApp.com/tags/123/products, but I need to do some side loading to improve performance, the desired XHR would be:
http://api.myApp.com/tags/123/products?include=sideload1,sideload2,sideload3
My router looks like this:
this.route('tags', function() {
this.route('tag', { path: ':id' }, function() {
this.route('products', function() {
});
});
});
I'll like to sideload some async models for products, currently I have:
// app/routes/tags/tag/products.js
model() {
return this.modelFor('tags.tag').get('products');
}
How would I go about adding query params in route?
I'm doing something similar in a project and store.query(type, { query }); has worked for me. http://emberjs.com/blog/2015/06/18/ember-data-1-13-released.html#toc_query-and-queryrecord
Try doing a store.query when defining your model and passing in
{include: "sideload1,sideload2,sideload3"}
Another option could be creating an adapter for your model and using buildURL to add on the query params... However this is a bit hacky and shouldn't be necessary if your API is following the JSON API standards.
App.TagsAdapter = DS.JSONAPIAdapter.extend({
buildURL: function(type, id) {
var baseURL = 'http://api.myApp.com/tags/123/products';
var method = '?include=sideload1,sideload2,sideload3';
return baseURL + method;
}
});

Emberjs call a method from an other object

This might be a silly question, but I can't find out anything about it anywhere...
I create a method in one of my controller to verify if the user session is still good, and I'm using this method in almost every page of my app in my beforeModel. But the thing is that I don't want to copy/paste the code every time in every route, this will be dirty and I really don't like it.
Lets say I have this controller :
App.LoginController = Ember.ObjectController.extend({
...
isSession: function() {
var session = this;
Ember.$
.get(host + '/session', function(data) {
console.log('DEBUG: Session OK');
})
.fail(function() {
console.log('DEBUG: Session FAIL');
session.transitionToRoute('login');
});
}
});
How can I call it in this router :
App.HomeRoute = Ember.Route.extend({
beforeModel: function(transition) {
//Here
},
model: function() {
return this.store.all('login');
}
});
I've tried this this.get('loginController').isSession(); but I receive this error Error while loading route: TypeError: Cannot call method 'isSession' of undefined
Thanks for the help !
[edit]
I don't have much to show but this :
My map
App.Router.map(function() {
this.route('login', { path: '/' });
this.route('home');
this.resource('enquiries', function() {
this.route('enquiry', { path: '/:enquiry_id' }, function() {
this.route('update');
});
});
});
Most likely I only Have a LoginController and my HomeRoute. (its the beginning of the app)
I don't need to create a Route for my Login because I have an action helper in my login template and I'm redirected to my Home template after that.
You need to use controllerFor() method in order to call method on controller from router. If method is an action you need to use send() method, like this.controllerFor('login').send('isSession')
App.HomeRoute = Ember.Route.extend({
actions: {
willTransition: function(transition) {
transition.abort();
this.controllerFor('login').isSession()
}
});
If you don't need a return value from isSession you might consider making it an action on a top-level route. The router.send method in the docs has a pretty good example of how you declare actions as well as how you call them. Note that send is also a method you can call on a controller. Actions bubble up from a controller, to the parent route, and then all the way up the route hierarchy, as shown here

in ember how to create a class method on Ember.Object.extend that can work to access a json service

Sorry to ask such a simple question but I'm looking at migrating from jQuery to Ember and am trying to figure out calling / responding json without using ember-data. One question I have is how do people suggest having class methods. Say for example I have a post object like this:
Hex.Post = Ember.Object.extend({
id: null,
body: null
});
Would a reasonable findById look like this?
$(document).ready(function(){
Hex.Post.findById=function(id){
console.log("you are here");
$.getJSON("/arc/v1/api/post/" + id, function(data){
var post = Hex.Post.create();
post.set('id', data.id);
post.set('body',data.body);
return post;
});
};
});
Or is this just wrong for creating a findById class method?
When I run this from the chrome console, it comes back as undefined even though the JSON call works fine in a brower. What am I doing wrong?
thx
FROM CHROME CONSOLE:
You'd want to define it on the class, and return the ajax call, which is then a promise
Hex.Post = Ember.Object.extend({
id: null,
body: null
});
Hex.Post.reopenClass({
findById: function(id) {
return Ember.$.getJSON("/arc/v1/api/post/" + id).then(function(data){
var post = Hex.Post.create();
post.set('id', data.id);
post.set('body',data.body);
return post;
});
}
});
Using the promise
from a model hook, Ember will resolve the promise for you, example below
Hex.PostRoute = Em.Route.extend({
model: function(param){
return Hex.Post.findById(param.id);
}
});
as the promise
Hex.Post.findById(42).then(function(record){
console.log(record);
});
or
var promise = Hex.Post.findById(42);
promise.then(function(record){
console.log(record);
});
And here's a simple example:
http://emberjs.jsbin.com/OxIDiVU/21/edit

transition after saving model of ember data

I want to make transition after a create a post.
post/new > click submit > rails backend successfully create post and response a json > redirect to newly created post's path
in ember_data_example github source code. they use this approach
transitionAfterSave: function() {
// when creating new records, it's necessary to wait for the record to be assigned
// an id before we can transition to its route (which depends on its id)
if (this.get('content.id')) {
this.transitionToRoute('contact', this.get('content'));
}
}.observes('content.id'),
It works fine, because The model has ID of null when model created, and its ID would change when model saving is successful because this function observes change of models ID.
But maybe, this function will be executed whenever model's ID property is changed.
I'm finding some more semantic way.
I want transition to be executed
when the model's status is changed to 'isDirty' = false && 'isNew' == true form 'isDirty' = true, 'isNew' = false.
How can I implement this?
Ideally, the id is not supposed to change. However, you are correct, semantically, this method doesn't seem right.
There is a cleaner way to do this:
save: function(contact) {
contact.one('didCreate', this, function(){
this.transitionToRoute('contact', contact);
});
this.get('store').commit();
}
UPDATE 2013-11-27 (ED 1.0 beta):
save: function(contact) {
var self = this;
contact.save().then(function() {
self.transitionToRoute('contact', contact);
});
}
Note for Ember 2.4 It is encoraged to handle saving actions in the component or route level (and avoid controllers). Here's an example below. Note the id on the model object in the transition. And note how we use transitionTo and not transitionToRoute in the route.
actions: {
save() {
var new_contact = this.modelFor('contact.new');
new_contact.save().then((contact) => {
this.transitionTo('contact.show', contact.id);
});
},
actions: {
buttonClick: function () {
Ember.debug('Saving Hipster');
this.get('model').save()
.then(function (result) {
this.transitionToRoute('hipster.view', result);
}.bind(this));
}
}