Ractive with Require example

Question

Hey I have been learning RactiveJS a little bit and really like it so far. I wanted to use it with RequireJS and found this: https://github.com/Rich-Harris/Ractive/wiki/Using-Ractive-with-RequireJS

however, it doesn't show the html template or how any of that code is implemented. This is the best I have so far:

(function () {
    requirejs.config({
        baseUrl: 'js',
    });

    require(['alerter', 'Ractive'], function (alerter, Ractive) {
        alerter.showMessage();

        Ractive = new Ractive({
            el: 'container',
            template: "{{greeting}} {{recipient}}!",
            data: {
                'greeting': alerter.showMessage(),
                'recipient': 'mike'
            }
        });
    });
})();

so the above code works but you have to explicitly put as the template, which bits of code you want.

Is there a working example of the code in the link above? or another example that shows how to use require with ractive but not have to hardcode the moustaches in the template object.

thanks for any and all help.

Answer 1

with require.js you can load text content using the "text" plugin from the project page:

require(['text!path/to/your/template.txt'], function (tmpl) {
    ...
    Ractive = new Ractive({
        el: 'container',
        template: tmpl,
        data: {
            'greeting': alerter.showMessage(),
            'recipient': 'mike'
        }
    });
});

Hope this helps, good luck

Answer 2

edit - there's now a sample Ractive+RequireJS application at https://github.com/RactiveJS/requirejs-ractive/tree/master/sample

Vanhelgen's answer is correct - the text plugin (download from here) allows you to require any resource, not just AMD modules in .js files, which allows you to keep your templates in a separate file.

So in the second example block of the wiki page, the contents of the templates/main.html file are available to the code block as the variable mainTemplate.

Taking it one step further, you can use the Ractive loader plugin alongside the text plugin, and the contents of the html file will be preparsed with Ractive's parser. (This is only really worth doing if you're using the RequireJS optimiser to bundle everything into a single file before deploying your app.)

As an aside, it's best not to overwrite variables like Ractive, as it can cause some hard-to-debug situations. The convention is to use lowercase variable names for instances, so ractive = new Ractive(...) rather than Ractive = new Ractive(...).