What is the better way to handle concurrency inside a flux store, when you have a lot of react js suscribed components to the same flux store ?.
Old question, but you can set Boolean attributes in your store, and use them to check if a task is running or finished by dispatching events from your action.
Like a
// set 'loading' in your store,
// then you can display spinner for exemple
dispatch(ACTION_START)
then
// set loading to false and loaded to true,
// you can also implement an action running count for exemple
dispatch(ACTION_END)
Related
I am building an application using Qt/QML. The QML of my main window is very complex and depends on lots of data which must be loaded via HTTP and then be processed by a C++ backend before it is ready to be displayed.
The C++ backend provides a signal which is fired when the data is ready. Until then, I want the window to be empty except for a simple loading indicator being displayed. Of course, I could use a simple overlay which hides my actual interface until the data is available, but this would mean that the QML code of my actual user interface is already loaded and tries to access the not-yet-available data, which is causing a lot of errors, so I would need to add dozens of dummy values and NOTIFY signals for each single property which might not yet be available.
What is the best way to completely deactivate a portion of QML code and to enable it as soon as a signal is triggered?
My personal experience is to not give data to your view components, don't bind them. For example, set your text value to an empty string or don't set it, set your image component source to an empty string or don't set it at first. When your signal comes in with data ready, you assign the data to the views at that time.
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
I'm using Ember 2.3 and have built a controller around Ember Highcharts. When a chart point is clicked I send that event back to the controller via the following nasty bit of code added to the highcharts configuration object:
Graph.__container__.lookup('controller:accounts.account.outlets.outlet.ratings').send('pointClick', event);
(I know this is fundamentally wrong and should be using getOwner.lookup for the container reference)
This works without issue, but I'm now refactoring this controller to a component and can't think how to pass the graph event back to the component as components are not registered in the app container.
Any pointers to how to achieve this would be very much appreciated!
Thanks.
UPDATE
I've just discovered that I can send an action to a component from the Highcharts event function:
Graph.__container__.lookup('component:ratingsGraph').send('pointClick', event)
But this seems to create a new instance of the component, rather than send to the existing instance. I guess that makes sense as components aren't singletons.
Very frustrating!
Some days you can't see the wood for the trees!
Instead of defining the highcharts event function in the highcharts configuration parameters, I simply defined it within the component and passed it to highcharts. This enabled me to use a closure to hold reference to the defining component.
Doh!
I am wondering what is the best way to control behaviour on a component.
In my case I have a {{stop-watch}} component.
I want to start, stop and reset the component via the routes using the {{stop-watch}} in their template. The start and reset function should allow me to somehow pass the number of seconds to run for.
How can this be done when a component only really supports bindings and not the ability to execute behaviour?
This is the only way I can think of doing it. In this case; isStarted,isStopped and isReset would be boolean variables and I would toggle them to control the component.
{{stop-watch start=isStarted stop=isStopped reset=isReset timeout=timoutSeconds}}
Toggle like this for each property binding in the controller
this.set('isStarted', !this.get('isStarted'));
Observe like this for each property in the component
startUpdated : function() {
//start the timer
}.property('start')
In my opinion the above solution is very inelegant and verbose and there must be a better way to achieve this.
Are the any best practices for this scenario?
You should have a model that possesses a state and methods to control the state.
You set up an instance of the model in the route, then you'll be able to control it both in the controller and the stop-watch component.
The component will automatically update its looks based on the properties of the model, and will be able to call methods on the model via actions on the component.