How to handle multiple templates in Ractive

Question

Let's say I have two templates: a template indexwith my main content and a template changelogwith a change. They are considered different patterns:

<script id='index' type='text/ractive'>
// ...
</script>

<script id='changelog' type='text/ractive'>
// ...
</script>

ractive = new Ractive({...});

What would be the best way to change these templates on the fly and programmatically? I thought I could change the variable templatefor the instance Ractive, i.e. ractive.template = '#changelog';but a change that does not update the content output. Ideally, I would like the user to press a button on the menu and switch between indexand changelog.

Answer 1

- , - . GitHub .

:

<script id='main' type='text/ractive'>
  {{# page === 'index' }}
    {{>index}}
  {{/}}

  {{# page === 'changelog' }}
    {{>changelog}}
  {{/}}
</script>

<script id='index' type='text/ractive>...</script>
<script id='changelog' type='text/ractive>...</script>

, , ractive.set('page', 'changelog'), .

<script>, , :

ractive = new Ractive({
  /* other options... */
  template: mainTemplate,
  partials: {
    index: indexTemplate,
    changelog: changelogTemplate
  }
});

Answer 2

, . , . ractive "resetTemplate", . :

var rxObject = new Ractive({
  el: '#element',
  template: '#template_1'
});

//what you can do at any point in your code is call ractive.resetTemplate, as such:

rxObject.resetTemplate('#template_2');

<script id="template_1" type="text/html">
  
  //content of this script
  
</script>

<script id="template_2" type="text/html">
  
  //content of this script
  
</script>

Hide result

, , , "" .