Develop Reference

remove template in renderTemplate ember route after loading is finished

i made a loading view when the route has to much waiting for the data, this is my route
import Ember from 'ember';
import ENV from '../../config/environment';
export default Ember.Route.extend({
desaService: Ember.inject.service(),
model(){
return Ember.RSVP.hash({
currentlyLoading:true,
desas: this.get('desaService').find(ENV.defaultOffset, ENV.defaultLimit),
desaCount: this.get('desaService').count()
});
},
setupController(controller, model) {
this.controllerFor('backend.master-desa').set('desas', model.desas);
this.controllerFor('backend.master-desa').set('currentlyLoading', model.currentlyLoading);
this.controllerFor('backend.master-desa').set('desaCount', model.desaCount);
},
renderTemplate(controller, model){
let controller2 = this.controllerFor('backend.master-desa');
if(controller2.get('currentlyLoading')){
this.render('components/common/loading-view', {
into:'application'
});
}
},
actions:{
loading(transition, originRoute){
let controller = this.controllerFor('backend.master-desa');
controller.set('currentlyLoading', true);
transition.promise.finally(function() {
controller.set('currentlyLoading', false);
});
}
}
});
first i set currentlyLoading true, then the renderTemplate will be called and showing 'components/common/loading-view' into application.hbs.
this is work but i need to remove that 'components/common/loading-view' after the loading actions has complete.
please help me :(

You can make use of disconnectOutlet method of router. What you need to do is to call the following to remove the template that is rendered within renderTemplate hook method.
actions:{
loading(transition, originRoute){
let _this = this;
let controller = this.controllerFor('backend.master-desa');
controller.set('currentlyLoading', true);
transition.promise.finally(function() {
controller.set('currentlyLoading', false);
_this.disconnectOutlet({
outlet: '',
parentView: 'application'
});
});
}
}
However, if you run your application probably you are going to see that nothing is rendered. Here is the reason:
renderTemplate hook is run after model is already solved; hence you will see nothing until the model is fully resolved. renderTemplate hook will be run to make a rendering; however loading event within actions will be fired and you will remove the template that is about to be rendered since loading is finished. Hence, you will not achieve what you want with this design approach.
You need to is to render something before model is fully resolved; and that is explained in the guide specifically. I suggest you to go over it and ask more if you run into some issues.
I have prepared the following twiddle for you that illustrates both usage of a loading template to show until model is fully resolved and usage of disconnectOutlet to remove a template that is rendered to a specific outlet. I hope this will help you understand better. Best Regards.

You doing it wrong, read the guide. All you need is to create a loading.hbs file and put html for loading screen there.
Also, if you want to create a loading indicator that will be displayed while assets are loading and application is starting, you can use this addon
Also, Your setupController can be simplified to controller.setProperties(model);. setProperties doc

Fine-tune refreshing of multiple models in Ember route

There's a well known approach to support loading more than one model promise in an Ember route, using Ember.RSVP.hash:
// app/routes/posts.js
export default Ember.Route.extend({
model(params) {
return Ember.RSVP.hash({
posts: this.store.findAll('post', params),
tags: this.store.findAll('tag', params),
});
},
});
Now I have a page param, to be able to load the posts in batches, instead of loading them and showing them all at once. But page changes do not alter the tags. However, when the page param changes, the whole model of the route is triggered again to re-load, causing the app to re-fetch both the posts for the new page, and the same tags all over again.
Is there a way to fine-tune this so that the tags are not loaded when certain params change?

There are several ways to refacto your code. Like moving tags out of model. Or doing pagination differently (w/o model refresh). The one I like is writing a custom getAll utility.
var cache = {}; // model_name => Promise<[Record]>
function getAll(store, model) {
if(!store.modelFor(model).cacheable) {
return store.findAll(model);
}
if(!cache[model]) {
cache[model] = store.findAll(model);
}
return cache[model];
}
And in your model now
import { getAll } from 'utils/store';
...
tags: getAll('tag'),

How I do a search with POST in Ember 2 and Ember Data

I'm make a search for a application in Ember 2 which my backend only accept a POST for this search, so Im trying send data through customize createRecord, but the behavior is completely different from I'm expected, two points I believe be a problem.
After several console.log(), I see my actions don't work, even action setted in route.
Inside Ember Inspector the route for this search haven't a model related
Anyone have a hint about why my route don't have a model related, follow the model declaration for this specific route.
model() {
return {
data: this.store.findAll('booking'),
booking: {}
};
}
PS: I edited the title, to be more clear about I need.

I believe you need to use Ember.RSVP.hash for that:
model() {
return Ember.RSVP.hash({
data: this.store.findAll('booking'),
booking: {}
});
}

Meteor template data context not available in template.created upon refresh

I use the template data context inside a template's created function.
Template.temp.created = function() { console.log('this.data'); };
When I go to the page normally--i.e. click the link to the page--I see the console log the correct data object. When I hit the refresh button on the page, this.data is null.
Why?
Also, I am using iron-router to set the data context:
...
this.route('temp', {
...
data: function() { return MyCollection.findOne(someId); },
...
}
...

If you want to wait until data come then use waitOn.
this.route('temp', {
waitOn:function(){
return this.subscribe("nameOfPublishFunction");
},
data: function() { return MyCollection.findOne(someId); },
...
}
Remember to activate loading hook (thanks #Peppe L-G):
Router.onBeforeAction("loading");
IronRouter docs #waitOn
Update
Here you can find sample meteor app with iron:router package which shows how turning loading hook on and off ( Router.onBeforeAction("loading")) changes availability of data to created and rendered methods.

How to reload correctly a route in Ember JS

I'm working with the latest release of Ember JS (RC1), and I have an architectural problem :
I have a very simple use case : a list of users, and a form to add users.
My Router:
App.Router.map(function () {
this.resource('users', function () {
this.route('new');
});
});
My Routes:
App.UsersRoute = Em.Route.extend({
model:function () {
return App.User.findAll();
}
});
My Controller:
App.UsersNewController = Em.ObjectController.extend({
saveUser:function () {
//'content' contains the user
App.User.save(this.content);
// here i want to reload the list of users, but it doesn't work
// The application goes correctly to the url /users
// But doesn't call the 'model' function
this.transitionToRoute('users');
}
});
As I say in the above comment, when I create a new User, I'd like to redirect to the list of users (that part works) AND reload the user list by calling the 'model' method of the route (that part doesn't).
I could write a method in UsersController to reload the list, but then I would have duplication between UsersRoute and UsersController.
Can someone help me on this problem ?
Thanks
P.S. : here a fiddle http://jsfiddle.net/vsxXj/

Ember Documentation on the model hook:
"A hook you can implement to convert the URL into the model for this
route."
So i do not think that this hook is right for this case. I think you should use the setupController hook for this case. Try this:
App.UsersRoute = Em.Route.extend({
setupController(controller){
controller.set("content", App.User.findAll());
}
});