Re-render a template?

Use-case

Using a listTemplate, I would like to make the relatedContent area dynamic, populating it with content when a listItemLockup is highlighted by the user.

Consider the following (simplified) page:

import ATV from 'atvjs';
import template from './template.hbs';

const APIURL = 'http://myapi/shows';

let Page = ATV.Page.create({
  name: 'shows',
  template: template,
  events: {
    select(e) {
      console.log(e);
    },
    highlight(e) {
      // RE-RENDER
    }
  },
  ready(options, resolve, reject) {
    ATV.Ajax
      .get(APIURL)
      .then((xhr) => {
        let response = xhr.response;
        resolve(response);
      }, (xhr) => {
        let response = xhr.response;
        reject({
          status: xhr.status,
          message: response.message
        });
      });
  }
});

export default Page;

Using the ReactJS model as an analogy, I would like to be able to do something like:

• on select event, derive data from event object to create “related content”.
• manipulate the ‘state’ (data) of that page that gets passed to the template.
• re-render the template with new data.

I tried to do this by storing a reference to the resolve method passed into ready and giving that fresh data but, although I can see output in the console that this has done something with the data, the page doesn’t re-render.

I’m assuming this is possible somehow, I’m probably missing something really obvious…

EDIT:

Having played around, it seems you can do some old-fashioned DOM traversal/manipulation using the reference to doc that the afterReady method receives. Although this is a passable way of doing things, I would be interested to know if there scope for something more aligned with the way modern SPA’s are built, rather than hunting down nodes and injecting content in to them.

[spunkedy]

I found some of the code. I haven’t tested this in a while however, here it is.

https://gist.github.com/spunkedy/27aa9d3db6abdcb401f75c67da8be8e3

Hope this helps. I didn’t include the server side that creates the channel that accepts a longpolling mechanism.

The server side is a web socket supporting longpolling which was good enough for what I was doing.

[spunkedy]

I don’t have the code around anymore. If I get a chance later I might pop it back in here. The server side has to be able to support it.