Changing template dynamically - having troubles

[abulka]

My use case is user editable templates, which I just can't seem to get working in ractive. A ractive object loves having data change, but not the template itself. You seem to have to recreate the reactive object from scratch each time a template changes?

export const dataStore = new Ractive({
  data: {
    msg: "woopy",
    count: 42
  },
  template: ''
})

Recreating the reactive object each time its template changes is

• inefficient
• raises questions about where the underlying data is and transferring it to the new ractive instance
• messes with my observers dataStore.observe('*', updateRenderedText) - unobserving and re-observing is a challenge

I did finally find a routine resetTemplate in the documentation which I tried to use

dataStore.resetTemplate(Ractive.parse('Hello, {{msg}}'));
result = dataStore.toHTML()

but get errors like

ractive.unrender() was called on a Ractive instance that was not rendered
Failed to execute pattern observer callback for 'undefined': Cannot read properties of undefined (reading 'insertBefore')

I don't have target: in the reactive object set to anything, preferring to use .toHTML() and then inserting that into my html myself.

Surely it can't be that hard? Or am I simply using ractive wrong and shouldn't be considering changing templates dynamically.

[evs-chris]

Swapping out an instance's template is a pretty heavy thing to do, but there is a feature that's designed to handle dynamism related to templates. If you need to swap bits of template around often or to something dynamically created, I'd recommend using partials. Not only can a partial be changed by name, a partial can render an inline chunk of template from the data. In that example, whatever template you enter in the textarea is rendered once the change is committed to the data on blur.

You're not going to benefit significantly from Ractive over a more relatively simple template to HTML string renderer like mustache or handlebars if you manage actually changing the DOM yourself. If you're not attaching a Ractive instance to the DOM to let it render, you can just swap out its template and rerun toHTML.

[abulka]

Thanks for the example code using partials (which incidentally doesn't seem to run properly in Chrome on Mac, but runs ok in Firefox and Safari e.g. even this simple example fails in Chrome). I enhanced your example and added a data attribute. Typing in hi {{a}} then clicking outside the field to trigger the blur event correctly renders hi 1 - nice.

var r = new Ractive({
  target: '#target',
  template: '#template',
  observe: {
    str(v) {
      try {
        this.set('partial', Ractive.parse(v))
      } catch {}
    }
  },
  data: { a: 1, b: 2}  // <--- I added this
})

Got resetTemplate working

Setting partials aside for the moment, I managed to get the ractiveObj.resetTemplate(Ractive.parse(...)); approach to work by allowing the ractive object to have a target:. I'm actually ok with ractive updating the DOM for me.

On subscribing to global data

So now, if I have an instance of ractive for each HTML target, how do I implement a global data object? Having each ractive instance point its data: to a central plain global object e.g. data: globalData is a good start, because calling .set() on any ractive instance seems to update globalData OK.

But how to go in the other direction, to broadcast changes from globalData? How does some arbitrary part of my application (e.g. in the model domain) set a value on globalData and have all the reactive instances respond and update their UI elements? I don't want to maintain a global list of ractive instances and call .set on each of them each time there is a change in the globalData. So I tried creating a special dedicated ractive instance ractiveGlobalData, which doesn't have a target: which simply wraps the plain js object globalData, which the model domain can talk to and call set, and to which every other UI related bit of code could .observe(). The observe event fires OK but not sure how to make each ractive instance re-render e.g.

<div id=target></div>

var globalData = {
  msg: "hoopy",
  count: 43
}

var ractiveGlobalData = new Ractive({
  data: globalData
})

var r = new Ractive({
  target: '#target',
  template: 'count is {{count}}',
  data: globalData
})

const onObserverChange = () => {
  if (!r) return
  console.log(globalData.count)
  // How to force r to re-render?
}
ractiveGlobalData.observe('*', onObserverChange)

// model change, unrelated to UI, but expect all reactive objects with a target to re-render
ractiveGlobalData.set('count', 123)

demo

Of course there might be a totally different way of achieving this which I am missing.

[evs-chris]

Chrome is being a bit weird lately. I had to run the example a few times before it actually rendered anything in Chrome, and it's not clear why. No errors in the console, nothing to indicate a problem.

Most of my applications set up a single root instance that manages all of the data and acts as a sync point with the server, if there is one, via a websocket. This instance does not have to have a template or be rendered. I then use link to pull in whichever parts of the data that I need in a particular instance. You definitely do not want to set the same object in more than one instance, as it will get out of sync in all of the instances that do not call set or a subsequent update. I generally avoid having references to the data that should be managed by Ractive anywhere outside of an instance to avoid the temptation to mutate it in a way that won't be observed.

<div id=target></div>

var store = new Ractive({
  data: {
    msg: "hoopy",
    count: 43
  }
})

var r = new Ractive({
  target: '#target',
  template: `count is {{store.count}} <button on-click="@.add('store.count')">++</button>`,
  on: {
    init() { this.link('', 'store', { instance: store }); }
  }
});

store.observe('*', (v, _o, k) => {
  console.log(`${k} is now ${v}`);
}, { init: false });

store.set('count', 123);