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
Related
i just wanna refresh model in route while get an action from controller and run doRefresh action in this route
this is my code
import Ember from 'ember';
export default Ember.Route.extend({
profileFormService: Ember.inject.service(),
profileFormAtributeService: Ember.inject.service(),
model(){
return Ember.RSVP.hash({
profileForms: this.get('profileFormService').find(),
profileFormsAttributes: this.get('profileFormAtributeService').findByProfileFormId("1"),
inputTypes: {data: ['CHECKBOX', 'NUMBER_FIELD', 'PHONE_NUMBER', 'TEXT_FIELD', 'EMAIL', 'TEXT_AREA', 'RADIO_BUTTON', 'DESA', 'KABUPATEN_KOTA', 'PROVINSI', 'KECAMATAN', 'MAP_POINT', 'MAP_POLYGON']}
});
},
setupController(controller, model) {
this.controllerFor('backend.setting-profile-form-attribute').set('profileForms', model.profileForms);
this.controllerFor('backend.setting-profile-form-attribute').set('profileFormsAttributes', model.profileFormsAttributes);
this.controllerFor('backend.setting-profile-form-attribute').set('inputTypes', model.inputTypes);
},
actions:{
doRefresh(param){
let context = this;
this.get('profileFormAtributeService').findByProfileFormId(param).then(function (response) {
context.set("profileFormsAttributes",response);
}), function (e) {
this.debug(e);
};
}
}
});
unfortunately this is does'nt affect the profileFormsAttributes model.
I've ben trying to debug the model with this
this.debug(this.get('controller.model.profileFormsAttributes'))
this.debug(this.get('model.profileFormsAttributes'));
but the console log said undefined
can you resolve this and explain what happen in this my route..
thank's for your concern
Your problem is that you cannot achieve the object returned from within route in action handler directly like this.get('profileFormsAttributes'); hence your setting does not work.
this.get('controller.model.profileFormsAttributes');
this.get('model.profileFormsAttributes');
Even above two statements does not work; because you cannot retrieve model or controller like this.
You have two options; either you need to save what you are going to return from model directly within model hook with this.set('model', model) or you can achieve it with this.controllerFor(this.get('routeName')).get('model')
I would recommend the second approach for your case. Please take a look at the following twiddle that I have prepared to illustrate the case for you.
Please take a look at index.js where foo attribute of object returned from model hook is set with
Ember.set(this.controllerFor(this.get('routeName')).get('model'), 'foo', 'foo updated');
I hope this helps.
I am developing an Ember-cli app with ember 2.1.
I created a templates/loading.hbs and several other templates.
My foo template has a input that I use to send a queryParam to foo/bar.
foo/bar uses the query param to find its model:
export default Ember.Route.extend({
queryParams: {
q: {refreshModel: true}
},
model: function (params) {
if (params.q) {
return this.store.query('client', { q: params.q });
} else {
return {};
}
}
});
When I go from foo to foo/bar, the model gets loaded and foo/bar gets rendered correctly, but, during the loading time, I don't get the loading template. If I hit refresh in foo/bar, then I see the loading template.
Can you help me to understand this, and how can I make sure I always get the loading template.
Thanks!
If you are using liquid-fire, the current version breaks all loading substates. I have PR'd the main repository.
https://github.com/ef4/liquid-fire/pull/384
Until then, you can add the fork to your package.json:
"liquid-fire": "git#github.com:erkie/liquid-fire.git#breaking-loading-substates"
in Ember.js I have route with model. Could you help me, when I'm on route playlist how to reload this route (or set new data to model) called by callback from another JS function? I've been looking to documentation so long, but no help for me.
App.PlaylistRoute = Ember.Route.extend({
setupController: function(controller, model) {
$.getJSON('api/playlist.php?' + Math.random().toString(36), function (data) {
controller.set('model', data);
});
}
});
Thanks a lot!
It seems the solution in the answer won't work for current route.
I had a same issue and tried the solution here and it worked.
http://discuss.emberjs.com/t/refresh-current-view-page-after-language-change/4291/5#post_5
In your route.
actions: {
sessionChanged: function() {
this.refresh();
}
}
and in your controller.
observeSession: function() {
this.send("sessionChanged");
}.observes("session.isAuthenticated"),
There are two ways of doing it.
One is write an action in playlist route and call this.refresh() inside it
For more information you can visit Ember Guide refresh method for route.
The other way is in your controller depending on the situation when you need to reload your route use
this.get('target.target.router').refresh();
any of the two would help you in refreshing your route.
A small note of refresh method below from ember guides:
Refresh the model on this route and any child routes, firing the beforeModel, model, and afterModel hooks in a similar fashion to how routes are entered when transitioning in from other route. The current route params (e.g. article_id) will be passed in to the respective model hooks, and if a different model is returned, setupController and associated route hooks will re-fire as well.
From a controller use transitionToRoute:
this.transitionToRoute('playlist', newModel);
From a route use transitionTo:
this.transitionTo('playlist', newModel);
For example, imagine you have an action on your controller
App.PlaylistController = Ember.ArrayController.extend({
actions: {
grabNewModel: function(){
//get some new model
this.transitionToRoute('playlist', newModel);
}
}
});
This answer appears first on google when searching how to refresh a route with the current accepted answer being out of date. If you really need to refresh a route and perform the model hook action again from an action in a controller then use the following:
In the route
#action
refreshModel() {
this.refresh();
}
In order to call this action in the controller use
this.send('refreshModel');
For example:
#action
performUpdate(event) {
event.preventDefault();
// Perform necessary action
this.send('refreshModel');
}
Note: This will send the action to the corresponding route for the controller it is called from, and update that route only and any child routes.
I have a view:
App.MyView = Ember.View.extend({
templateName: 'parent',
mouseEnter: function() {
// Do something
}
});
whose template has an {{outlet}}.
Here's the JS Bin: http://jsbin.com/ucanam/2779/edit
I'm trying to render into the outlet, and I can't figure out why it's not working. I tried putting the render call in an Em.run.next, because this issue is similar to https://github.com/emberjs/ember.js/issues/3626
Great question, but this isn't supported, here's some reasons:
The documentation specifies that the into is the route (http://emberjs.com/guides/routing/rendering-a-template/).
It's a dynamic view, which makes it an interesting problem, if you have multiple instances of the view, which would ember choose?
That being said you can still restructure the app to handle what you want
http://jsbin.com/ucanam/2785/edit
I have a view that I need to dynamically create and insert into an Ember app ( off master - v1.0.0-rc.3-178-ge031b24 ) , and recently this view has started producing the notice:
DEPRECATION: Using the defaultContainer is no longer supported.
[defaultContainer#lookup]
I've made some attempts to modify what I'm doing to rectify my implementation, but I haven't been able to find what I need to do.
currently, I'm attaching a new ViewContainer to the controller on route setup:
App.ThingRoute = Em.Route.extend
setupDetailContainers: (controller) ->
controller.set('imageContainer', Em.ContainerView.create())
controller.get('imageContainer').appendTo(App.rootElement)
Then in the controller, when they click an image thumbnail the full size is inserted with:
showFullImage: (image) ->
image_full = image.asset_url.replace(':size', 'original')
container = #get('imageContainer')
container.pushObject App.ShowImageView.create({image: image_full})
Any guidance on the correct way to do this, in order to remove deprecation warnings would be appreciated.
I had a same problem, but before the deprecation message, so Ember was throwing an error.
Look here https://github.com/emberjs/ember.js/issues/2597
The bottom line is that you need to use createChildView inside of the view you will be creating the child in so that proper parent - children hierarchy is created.
I started running into this problem after updating to v1.0.0-rc.3-292-g39e9ef7. For me the problem arose from defining a childViewusing create() rather than extend(). For example, I had done:
App.FooView = Ember.View.extend({
templateName: 'fooTemplate'
, childViews: ['barView']
, barView: Ember.View.create({
... bindings and stuff ....
})
.... more and more ....
});
... and the notice I was receiving went away when I changed the line:
, barView: Ember.View.create({
... to:
, barView: Ember.View.extend({
Hope this helps others who might hit this notice from a similar set of circumstances.