Hello,
I’ll quickly describe the app. It’s a SPA that has a multitude of forms with file upload ability and a bunch of datatables. Each page is a component, so are each of the forms, so are the datatables, and so forth… can.Components for every section of the actual app.
The question: Is there anyway to delay the template on a can.Component from rendering until my code tells it to do so. So the problem that I am having is that, when I load a can.Component by it’s in a .stache template, on the events.init() function I am doing an $.ajax() / can.Model request and once the request is successful. I put the return data in the Components viewModel, so that the stache view can render pre-filled out fields and so forth.
What I am seeing is that at first before the $.ajax() request is finished, the template is rendered. Once the $.ajax() is fulfilled the template gets re-rendered with the new data.
The problem is that I see a weird data flash and the template jumping around a bit for a quick second. I am also assuming that this a performance hit.
One of the potential fixes is to not use can.Components, and instead use can.Control, because this method allows you to render a template on your command.I feel like this is the long and grueling task since I would have to move a bunch of code around.
There is also the obvious fix, of just putting over a loading screen. This does not fix the potential performance hit.
Third option is to, on each parent component that is loading a child component via the tag in a template. Have a conditional statement on the parent component template to check if the data needed for the child component is loaded via ajax. Then render the child component tag. Which would load it’s template while having the data beforehand. Therefor no flash and no need to move too much code around.
The last method, would require me to just grab the $.ajax() code from the init function of each child component, and put it in its parent. Also, I’d have to load the component with a data bindings and a quick if{} statement around each component tag.
Any suggestions help!
Thanks!!!