setState into template page on pageInit

1

I am trying to use setState to load data into my template page on pageInit, but i get the “Cannot read property ‘XXX’ of undefined” error triggered by the template {{mydatathatisntloadedyet}} before the page can run the pageInit to get the data. i know about the async route method that can load context data before the page transitions but i want to do the ajax on the component page with pageInit after the transition. Is there a way for me to have the template load the html without throwing errors so it can update the template after the setState?

return {
data: function () {
	
  return {
    title: 'Welcome',
  }
},
methods: {

},
on: {
	pageInit: function(){
	
		app.request.json('URL', function (c_data) {
			
		  self.$setState({
			view_data: c_data,
		  });
		  
		});
	
	}
		  
}

}

2

Use {{#if ...}}} in template to check the actual data

3

Yes, but this will make the template html markup very verbose if i have many variables. I wonder if there was a simpler way to go about it. Basically i just wanted to show the user the page markup before the data comes in so they aren’t waiting around for the ajax to complete before the page transition,etc.

4

I came up with a solution that fits my needs if it helps anyone. Simply by setting a blank view_data in the data return it made the template happy enough to load up and wait for the setState to load in the data.

return {
data: function () {
	
  return {
    title: 'Welcome',
	view_data: '',
  }
},
methods: {

},
on: {
	pageInit: function(){
	
		var self = this;	
		var app = self.$app;
		
		app.request.json('URL', function (c_data) {
			
		  self.$setState({
			view_data: c_data,
		  });
		  
		});
	
	}
		  
}

}