Reload a Page with AJAX Content

[hajanet]

I'm actually writing a private TVML/TVJS-App with atvjs.
First thanks for your brilliant framework-work!

I've got one problem:
I've got an interactive HomePage and also interactive subpages.
So at the start of the app the app gets the JSON from the server and render it to the template.
This page is cached then and can not be re-rendered; or?

For example:
I've got a page with a list of TV-Show episodes, on these episodes I've got a marker for the "Last seen"-episode. When I watch an episode the JS-File of the player then tells the server that the episode is watched. After exiting the player, the list should be dynamically re-rendered to display the newest server-information.

Is there a way to make boundings between ajax/template to re-render pages dynamically?

Thanks a lot!

[hajanet]

I've done it with a helper class.

import ATV from 'atvjs';

const docs = {};
const configs = {};

const doc_func = {
	setDoc(name, doc) { docs[name] = doc; },
	getDoc(name) { return docs[name]; },
	setConfig(config) { configs[config.name] = config; },
	getConfig(name) { return configs[name]; },
	reloadPage(name, options) {
		let config = this.getConfig(name);
		let oldDoc = this.getDoc(name);
		let newDoc = ATV.Page.makeDom(config, options);
		this.setDoc(name, newDoc);
		ATV.Navigation.replaceDocument(newDoc, oldDoc);
	}
};

export default doc_func;

Import it in your pages

import DOCS from 'lib/globals';

Then you need to create pages with a configuration object

let config = {
   name:'example', 
   template:template, 
   afterReady(doc) {
      DOCS.setDoc('example', doc);
   }
}

Use this object in your creation

DOCS.setConfig(config);

var ExamplePage = ATV.Page.create(config);

Then you can reload the page with new ajax content in your subpages by name and xhr object

DOCS.reloadPage('example', xhr.response);

[a-ignatov-parc]

If you need highly interactive application with a lot of content then I want to suggest you check tvdml.

It has react.js support added in v6 with full virtual dom support and atomic updates. This features will grant you fast UI updates and prevent losing focus from UI elements on document replacement. Also, there is DataItem support if you need super fast rendering time.

P.S. v6 is in beta but most of the major issues are already resolved ;)

[a-ignatov-parc]

If you don't want to change atvjs to something else I think you still need to check DataItem api and example Apple kindly provided in their docs.

[hajanet]

@a-ignatov-parc thanks for your advise!
Badly I already wrote the complete application already with atvjs. I didn't knew tvdml; thats bad.

Now I fixed a lot of my problems with the helperclass I wrote; not the best way, but for 4 people who use the app: practicable.

Thanks a lot!

[dseeker]

Hey @hajanet, I'm trying to use your helper class, I can see the template data changed in the console logs, but in the end I get "Error: Document not found on stack". On the reloadpage function I can log newDoc and oldDoc, both exist. Any clues where I could be implementing it incorrectly?