Refresh Template Context


#1

Hey,

is there a way to refresh the context of a template without reloading the page? When I do it by .navigate … reloadCurrent … ignoreCache it works, but I want to keep the current focus and scroll position.

Thx!


#2

No chances because page template rendered on page load. But if you use router component (which is better for such cases), then it is possible to just rerender the changed elements only by calling its setState() method and it will keep scrolling and rest of the things correctly http://framework7.io/docs/router-component.html#virtual-dom


#3

Thx man! I restructured some parts to use components and it works fine… But I have some issues with $setState. When I have same changes in my data object and call $setState(dataObj[id]), it does not refresh the Dom. If I do a $setState(dataObj[someOtherId]) followed by $setState(dataObj[id]) it works. Is there some kind of caching?


#4

Well when you call setState it renrenders page and compares it to previously rendered page, and if results are the same then it won’t be updated, so your template must have variables from state or refer to something that changed


#5

I’ll check again. thx


#6

Hey… it was a bug in my response script - now everything works like a charm with components… except a little thing… when I set stackPages to true, the back button nor the back(); is broken. Is there an issue with stacking for component pages?


#7

There shouldn’t be any error with stacked pages and components. Would be good to see live example or something to replicate the issue


#8

I can try to set up an example…

but maybe you can see already here what’s wrong…

This is like I set up the view:

var userView = app.views.create('#view-user', {
	name: 'userView',
	stackPages: true,
	
	xhrCache: false,
	
	routes: [

		{
	      path: '/user/',
	      componentUrl: '/src_bguide/pages/user.html',
	      options: {
	        //animate: false,
	        //reloadCurrent: true,
	      },
	
	    },
		{
			path: '/user/:id',
			componentUrl: '/src_bguide/pages/user-view.html',
		},
		{
			path: '/user/edit/:id',
			componentUrl: '/src_bguide/pages/user-edit.html',
		},

	],

	
});

and a component looks like this:

<template>
  <div class="page stacked">	
...
  </div>
</template>

<script>
	
	return {
		data() {
		  return {
		    id: null,
		    dataSet: {
		        user		: null,
		        dMapKnowHow	: app.data.map.knowHow
		    }
		  }
		},

		methods: {
			refresh: function () {
				console.log("refresh User " + this.id); 
				this.dataSet.user = app.methods.getUserById(this.id);
				this.$setState(this.dataSet);
			}
		},
		
		created(){
			this.id = this.$route.params.id;
			this.dataSet.user = app.methods.getUserById(this.id);
			this.refresh();
			app.data.eTgt.addEventListener('userDataChanged', this.refresh);
		},    
		    
		destroyed() {
			app.data.eTgt.removeEventListener("userDataChanged",  this.refresh);
		},  
	};
	
</script>

#9

See two issues

  1. remove “stacked” class from pages that loaded from component
  2. $setState(this.dataSet) to me looks like should be $setState({ dataSet: this.dataSet })

#10

I removed the “stacked” class - same thing. The $setState is working fine this way as I user the full data object. As I said - rendering works well, only when I click on back there is an error:

TypeError: undefined is not an object (evaluating ‘e.$el.parents(".view")[0].f7View’)

With stackPages: false, there are no errors all.


#11

Ok, will try to replicate it on a days


#12

I found it! The problem was that the initial Dom container (#view-user) was filled with some old dummy stuff. I cleaned it up and now it works!