Understanding how to use require js combined with text js to load html templates inside a backbone application

Question

I am learning backbone js, trying to make a small project.

In the of te page, I load require.js and text.js from the cloudflare CDN

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js">//</script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/text.js">//</script>

I have made a backbone view called "Boxes":

var Boxes = Backbone.View.extend({

        // Choose an element.
        el : '.content',

        render : function () {

            // Captur "this" -> the backbone view itself.
            var that = this;

            $(this.el).html('how do I load a html template here?');

        }
    });

Problems:

1. When I add the text.js plugin to the page, I get the following error:

   Mismatched anonymous define() module: function (module) { 'use strict'; ......

So I can't have the require.js and the text.js both loaded, it gives me the above error even on a blank page without any other scripts on it.

1. After I make the require js work with text js, how do I load an html template for that view?

Right now I know how to do it when I write my templates inline, in the index.html page.

I do it like this:

var Boxes = Backbone.View.extend({

    el : '.content',

    render : function () {

        var that = this; // This backbone view

        var template = _.template($('#user-list-template').html(), {});

        that.$el.html(template);
    }
});

Thank you!

Solution 1

In your HTML file, you only need to load requrejs like as shown in this index.html

<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>

In above, "data-main" tells requirejs where to load its bootstrap file and in this case, it is under "js/main.js"

You can find the file in here.

In the main.js file, you will need to specify

require.config({ ... });

to configure requirejs.

After that you can use "define()/require()" to load the templates like...

define(['text!../../templates/app/content.about.html'],...);

See here for a complete example.

Solution 2

When you use require.js, you only use one script tag in your page. Everything else is loaded by Require.js.

To use a plugin, you'll configure it in a require.config

require.config({
    paths: {
        text: "path/to/text"
    }
});

Then in your modules, you simply call it:

define([
    "text!path/to/tpl"
], function( tplString ) {

});

Note though, that if you're managing templates, the best would be to load the template pre-compiled. Text plugin only return a string, this is not very good for optimisation and force you to repeat the template compilation logic. You should use a template loader plugin, for underscore/lodash micro-template, I recommend you this one: https://github.com/tbranyen/lodash-template-loader

If you want an example of an app using Require.js and Backbone, you should really check Backbone-Boilerplate: https://github.com/backbone-boilerplate/backbone-boilerplate

Backbone-Boilerplate is good way to setup your project fast using the best practices around Backbone development. Plus it use AMD extensively, so you'll have a working setting if it is your first time around.

Comments

[SamHuckaby]

I'm surprised that this kind of information isn't very clearly stated in the require.js documentation.

[Ashish Negi]

your answer is confusing. are you suggesting that there is a plugin text that one should use for using templates ?

[cdanea]

It seems that the text plugin cannot be loaded from a CDN. Running into the exact same issue, and unfortunately the text plugin must be hosted locally relative to the main script.

[mix3d]

The text plugin is a requirement of the template plugin, but using the template plugin is generally "better" since it can cache the compiled template for reuse, instead of recompiling from a string every time.