Ractive partial external file

I have a pretty complicated web page i am trying to build with Ractive,
It contains many partial templates.
I am trying to load a partial from a separate file just to keep my code clean.

Example:

<script id='content' type='text/ractive'>
 Hello!
</script>

http://jsfiddle.net/efrsmqhd/

How can i put 'content' into a separate file?

Solution

When Ractive tries to find a partial - let's say {{>foo}} - it first looks for ractive.partials.foo. Then it looks for ractive.partials[valueOfFoo] - so if ractive.get('foo') === 'bar', it will look for ractive.partials.bar.

Only when those have failed will it look for <script id='foo'>. So you can pass in your partials explicitly, like so:

var ractive = new Ractive({
  el: 'main',
  template: '{{>foo}}',
  partials: {
    foo: '<p>this is a <strong>foo</strong> partial</p>'
  }
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<main></main>

The prototype of ractive.partials is Ractive.partials, so if you have several Ractive instances on the page, they can share partials like so:

Ractive.partials.foo = '<p>this is a <strong>foo</strong> partial</p>';

var ractive = new Ractive({
  el: 'main',
  template: '{{>foo}}'
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<main></main>

So keeping your partials in separate files is as straightforward as loading them via AJAX and passing them in when you call new Ractive(). Of course, if you have lots of separate files, that becomes trickier, because you have to load them all before you can call new Ractive(). There are a number of ways to coordinate all that asynchronous activity, but the easiest way is to use Promises - here's an example that uses the window.fetch polyfill:

var ractive, partials = {}, promises;

promises = [ 'foo', 'bar', 'baz' ].map( function ( name ) {
  return fetch( 'templates/' + name + '.html' ).then( function ( response ) {
    return response.text().then(function(text) {
      partials[ name ] = text;
    });
  });
});

Promise.all( promises ).then( function () {
  ractive = new Ractive({
    el: 'body',
    template: '#template',
    partials: partials
  });
});