I'm a bit new to iron-router but I'm curious if there's an event handler I can define for after a route is loaded. If I attempt to call Router.current().data() in Meteor.startup, I get 'undefined' for Router.current(). I'd like to know the 'right' way to start doing things once the data is loaded in that route...
The code you're using is fine - Router.current().data().
The issue is that there is a race condition here. There are two things going on here, Meteor.startup may run before or after the router has decided what route its on. If it runs before the route has loaded, Router.current() would be null.
You might want to consider putting your code in your route's onAfterAction instead. This way it will also run on the correct page too. Router.current().data() would give back the wrong data on a different route.
Another thing to keep in mind is with Meteor you download the html, js and css first & have it load. Then the data comes after, so when you're looking for data when the page loads you have to wait for it first, otherwise you wont have anything.
Iron Router also has a hook called onData which reactively reruns when the corresponding route's data() changes. You can use this to ensure you have the data available and have it run after everything has loaded properly.
Related
I'm getting started with using Redux, and currently have a working use of action creators, reducers etc. My container is set up to mapStateToProps, and everything is showing up on our pages as expected.
One thing I was hoping for advice for was where to actually dispatch the fetch action creator. The data is retrieved via an API call and gets formatted and displayed on the page. Right now I have the dispatch in the constructor:
constructor(props) {
super(props);
...
props.dispatch(fetchInfoBlah(someParamsFromRouter))
}
This works, but I just put it there as a guess since most examples I've seen online trigger fetches as a result of some trigger/event, rather than just the fact that the component needs to load. I was previously making the API call from the componentDidMount().
Any thoughts?
Thanks in advance!
When I need to fetch data asap I always use componentDidMount().
Mainly because I bookmarked this article which I've been referencing quite a bit and it's seemed to work out for me so far!
https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
It totally depends on the situation.
If you need to display data/info when component first loaded, call it from constructor.
If you need to display/update data/info when user interact with your app, call it according to user actions.
componentDidMount() vs constructor()
componentDidMount() runs after render(). So componentDidMount is used when you want to make sure its run after component is rendered once. This helps reminding to set initial state data otherwise there's no data for render()
constructor() is the same as componentWillMount() and runs before render(). When calling inside constructor, the fetch response is available either before or after render()
I have a Vue.js component which gets a big list of releases from the database, at which point we can use all the lovely reactive list-filtering functionality to drill down to what we're looking for. The problem is that there's a very noticeable lag after page load before the list appears on the page.
Obviously loading the data in via ajax may not be instantaneous, but I thought I might be able to get better results by e.g. getting the data on the server-side with Laravel, and then passing it to the component from its containing Blade template as a prop. Not much luck so far though, again, a noticeable wait for the component to receive and display the data.
Are there any simple approaches for having a Vue component ready to go as quickly as possible? I looked at the prerender-spa-plugin for webpack but I don't know if that would interact properly with the Laravel routing. Likewise server-side rerendering with node seems like it could be more trouble than it's worth.
Has anyone experienced similar issues and found anything like a great solution?
you have too spot where you could do somethings. 1 on the server. by caching queries or somethings. And the second is on client side. when you handle the received / fetched collection. If you have, lets say 10000 entry, this would take sometime to a: parse the json object, b: create necessary vue components (if you're using vue component for row), and generating corresponding dom. So if you split and handle the recieved data in sized chunk. Vue would update the dom accordingly. and Fill the dom more like a stream. Not always the best approch but working in many case.
My code
https://gist.github.com/ButuzGOL/707d1605f63eef55e4af
So when I get sign-in success callback I want to make redirect,
redirect works through dispatcher too.
And I am getting Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.
Is there any hack to call action in the middle ?
I don't see where in the gist that you posted you are doing the redirect. I only see the AUTH_SIGNIN and AUTH_SIGNIN_SUCCESS actions, and they look pretty straightforward.
But no, there is no hack to create an action in the middle of a dispatch, and this is by design. Actions are not supposed to be things that cause a change. They are supposed to be like a newspaper that informs the application of a change in the outside world, and then the application responds to that news. The stores cause changes in themselves. Actions just inform them.
If you have this error, then you need to back up and look at how you're handling the original action. Most often, you can set up your application to respond to the original action, accomplish everything you need to do, and avoid trying to create a second action.
You can make it work by "scheduling" the next action instead of calling it directly, here is an example code:
// instead of doing this
Dispatcher.dispatch(...);
// go like this
setTimeout(function() {
Dispatcher.dispatch(...);
}, 1);
This will cause your next dispatch to be called later out of the current dispatch process, and no error will happen.
If your dispatch code is on a callback any kind of other async operation that will work as well (for example in a response for an Ajax request).
I'm using this style to make some forms respond to generic data here and I'm facing no issue, at least the way I'm using it.
you can user the "defer" option in the dispatcher.
In your case it would be like:
Dispatcher.dispatch.defer(...);
You can check if the dispatcher is dispatching, such as:
if(!MyDispatcher.isDispatching()) {
MyDispatcher.dispatch({...});
}
In AngularJs I can do this:
<header data-ng-include="views/header.html"></header>
which AFAIK asynchronously downloads views/header.html from client and interprets it as a template.
I want to ask if there is any sane motivation to use it because all I encountered with this was a pretty bad usex experience. I have a black Twitter Bootstrap header and this causes the header to show a moment later and therefore "hits" the user right in the eyes once all other content is visible.
On the top of that it does the request every time eventhough it just for a 304.
You can use an ng-include to separate some HTML that is re-used, you can also bind the data-ng-include to a variable on your scope and change the view similar to what you get with ng-view and using the $routeProvider configuration.
I'm not entirely sure about the attempted reload and seeing the not modified response. I would assume ng-include would operate under the same caching rules as a normal page but perhaps something is different since it does an AJAX request for it I assume.
I think you should be able to make it sync loading by adding a public counter to the on-load property of ng-include. And you can then wait the counter to increment to be the number of the templates loaded by ng-include, and then after all templates are loaded continue with other logic.
There are definitely some advantages of using ng-include. For example, you can use it together with ng-switch to conditionally load a template. And it also automatically creates a child scope if you want to isolate model from the current scope.
Hope it can shed some light on.
With a function a div-popover gets called and filled with dynamic data using Ajax, PHP, MySQL and some HTML/CSS. All goes fine.
When I want to delete an entry in the list just popped over it functions as it should. When I send an update request for my list it also goes the way I want it. But, when i call delete(); update(); right after eachother my first function gets skipped somehow.
When I place alert()'s in both functions I see both functions are getting executed and the scripts walk fine through my ajax function, PHP ajax handler and returns the result back to the user, and with the alerts on all is going well too!
So my question is, are my functions too fast? Or is there something I'm missing here which is causing the non-delete?
Solution I've moved the update call to the line after the xmlHttp.resonseText in the delete function. In that way the second function call gets executed after the first function is done. Thanks all!
My guess would be that you haven't thought about the A in AJAX. It stands for asynchronous. That means that when you perform an XmlHttpRequest call, it will be executed in the background. I.e. after you've called delete(); the script will immediately continue and execute update();.
javascript will just execute the next statement while an ajax call is going on. Most ways of using ajax have an on complete function that you can call, so that code that you want executed after an ajax call is called only afterwards.
I've not worked with php, but it may be worth looking into that.
It sounds like the two methods are executed at the same time (asynchronously) since its AJAX.
you want them to be excuted synchronously.
See this patterns page for more information... Ajax patterns