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