I use Ember data with the REST Adapter. I want to make sure that in case of slow server responses, the application does not fail.
I have simulated this bij adding at server side a sleep method of 5 seconds before returning the JSON response.
If you have a form with a SAVE button, and you click this button while a previous save is still is progress, you receive a inFlight error and the whole Ember app freezes (only thing you can do is reload app). So, you can easily disable the save button by checking the isSaving state:
<button {{action 'save'}} {{bindAttr disabled="isSaving"}}>Save</button>
Now it also seems that when changing a form field while a previous save is still is progress, you receive a inFlight error. This would thus indicate that I also need to disable the complete form.
Uncaught Error: Attempted to handle event `willSetProperty` on
<App.Author:ember477:5203e34599808d1c6c000001> while in state
rootState.loaded.updated.inFlight. Called with {reference: [object Object], store:
<App.Store:ember541>, name: name}
Is there a known good practice to handle these cases ... I want to prevent that I need to add a lot of logic (disable buttons, set fields readonly, etc.) for these edge cases.
It may not be within the scope of what you are trying to do, but the Ember Persistence Foundation is designed to allow updating your models while a save is still in flight.
It is relatively trivial to migrate your models to EPF, but there are some changes required in the controller code, see "Migrating from Ember Data".
Related
In ember, I have a form which ask the user their username and password for our remote server and then I want to verify the credentials by making an ajax call. Currently, I am using a custom made component which allows me to bind any action on clicking next or submit where I can verify the credentials and throw errors if needed. But once an error will occur, user cant click the next button (the way component is implemented) and hence second time validation is not happening. So, I thought to make a computed property which will look for username and password (and hence make ajax call when entered). But the problem with this approach is: every time something is entered in these boxes, computed property gets triggered which makes an ajax call (i dont want to make so many network calls for no purpose). Is there a way in ember where we can wait for user to finish the input and then invoke any kind of action?
Better approach is to use oninput with action:
<input oninput={{action "onInput" value="target.value"}}>
and then from action onInput debounce call to ajax function using debounceTask from ember-lifeline addon(this example), or using ember-concurrency:
actions: {
onInput(val){
debounceTask(this, 'sendAjax', val, 500);
}
}
10
I have a model with a bunch computed properties and things in a ready event:
one field of the model is a json field, for which I defined sub keys if non existent.
dynamic computed properties depending on the model content are defined
the model is associated to route rep/route/:idmodel with findRecord call to a backend
when I am on the page /rep/route/123, for instance, the ready event is fired and everything is ok,
so far so good
When I go elsewhere and return to /rep/route/123 the ready event is not fired again. it seems ok since there was not another ajax call, the record is in the data storage.
But what was defined in the ready callback seems not to persist. if the ready event was not called on the page /rep/route/123 I am returning on
subkeys of the json field are not there anymore
dynamic computed propertiesare not there
that is to say if the model has been loaded from the backend previously, the ready event was fired then, but the benefits of it (some computed properties defined dynamically on the model) disappear once I return on the page where it would be needed, if no new ajax call is needed.
the only workaround I found is to call model.reload on some didInsertElement of a component in the /rep/route template, to force ajax call and fire the ready event
I also tried to call this.get('model').ready() directly but it does not work.
So what would be the best way to keep all dynamic things defined in the ready event, when quitting the page and returning on it afterwards.
thanks
I am not sure I understand your question correctly, but an Ember route with a dynamic segment will only have its model hook called when it is .entered via the URL.
Since your :123 is a dynamic segment, transitionTo will not get model hook called in your route.
I have a component working pretty well and now I need to call it inside a controller.
Scenario: I have an ember application, and I have an update button controller, I did a component that just display a toast(Materializecss) with some message I pass as parameter to the component and both the button and the toast are working well separately. I need to call inside the button controller this component to display to the user if the update was successfully or not using this component I did. Any sugestion of how can I call this component inside the controller? Thanks
have a look at the ember-twiddle I created and see if it fits the bill, in regards to what you want to do ?
You should instead of thinking "calling the component", rather, how can I push updated attributes/data to the component.
Ember relies on the "Data Dow Actions Up" pattern. This implies that you cannot make an explicit call to a component action from a controller. (see https://dockyard.com/blog/2015/10/14/best-practices-data-down-actions-up for example)
Instead, a better design should be to define a service to manage data : messages to be "toasted". Then make this service available by injecting in in your controller. You will be able to call methods to register a new messages and generate new data.
Provide also a component template (to be included in your own templates) that will be in charge to display the new message, etc. Each change in the data managed by the service will lead to a component template update.
You should definitely take a look to https://www.npmjs.com/package/ember-toastr
How can we normally prevent Nothing handled the action error in generic view implementation.
Currently I am reopening controller class and adding empty handler but again if I put it directly Ember throws deprecation message Action handlers implemented directly on controllers are deprecated if I add it in action object it is "not working" (probably overridden) and throws error as if it is not in base controller. Any ideas? Thanks.
If you want a somewhat hacky way to do it, you can add the method to the _actions object on the controller. That's where Ember internally keeps all of the actions for an object. Unfortunately, there's no other way to really handle an unused action from a view. This issue suggested a feature that would allow you to, but it hasn't been implemented yet.
Personally, I don't use straight views at all, I only use components. Components allow you to subscribe to particular events (let them bubble up) and ignore the others completely.
I am trying to build out edit functionality for a Goal record. On the Goal index page, there is an edit button next to each goal. When clicked, each field becomes editable. Upon clicking Save, the changes are saved to the server. So far so good.
There is also a Cancel button. When a user clicks it, I need to reset the state of the model to what it was before they changed things. goal.rollback() in the controller works fine for this. Except, if the user has already clicked Save but there were server side validation failures. In this case, attempting to rollback() throws Uncaught Error: Attempted to handle event `reloadRecord` on <App.Goal:ember123:1234> while in state root.loaded.updated.invalid.
If instead I try to goal.reloadRecord I get Uncaught Error: Attempted to handle event `reloadRecord` on <App.Goal:ember123:1234> while in state root.loaded.updated.invalid.
Same deal with goal.unloadRecord. I have tried massaging the state like this:
state = goal.get('currentState') #this code makes me sad.
state.isValid = true
state.isError = false
And like this:
goal.transitionTo('loaded.saved')
To no avail. Is make zero sense to me the reloading or unloading a record should be statefull.
Any assistance would be greatly appreciated. Again, I'm trying to take a dirty, invalid record in ember and get it back to a happy state either by rolling back changes, or just reloading it from the server.
EDIT: Ember-data v1.0.0-beta.3-4-g169793e, ember Version: 1.1.2
Here's a working example, change the color then hit save.
http://emberjs.jsbin.com/OxIDiVU/44/edit
PR submitted https://github.com/emberjs/data/pull/1590