Backbone and requireJSe error: 404 Not Found when loading a template

Question

I've got the following error messages in the console:

http://localhost/web/js/text.js
404 Not Found

if a delete text! in "text!templates/collector/indexTemplate.html" form collector_index.js, I've got the following error message:

http://localhost/web/js/templates/collector/indexTemplate.html.js
404 Not Found

main.js

require.config({
    paths: {
        html5shiv: "libs/html5shiv",
        jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
        jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
        tablesorter: "libs/jquery.tablesorter.min",
        script: "script",
        underscore: "libs/underscore.min", /*"http://underscorejs.org/underscore",*/
        backbone: "libs/backbone.min", /*"http://backbonejs.org/backbone-min",*/
        utils: "utils",
//       Collector
        collectorModel: "models/collectorModel",
        collectorCollection: "collectorCollection",
        collectorRouter: "collectorRouter",
        // Views
        index: "views/collector/collector_index",
        row: "views/collector/collector_row",
    },
    shim: {
        jqueryui: {
            deps: ["jquery"],
            exports: "Jqueryui"
        },
        tablesorter: {
            deps: ["jquery"],
            exports: "TableSorter"
        },
        script: {
            deps: ["jquery"],
            exports: "Script"
        },
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    }

});

require(....

indexTemplate.html

<script type="text/template" id="indexTemplate">
    <table class="tables">
        <thead>
        <tr>
            <th>Name</th>
            <th>Role</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <a class="btns" href="#collector/new">New Collector</a>
</script>

collector_index.js

define([
    "backbone",
    "underscore",
    "row",
    "text!templates/collector/indexTemplate.html"
], function (Backbone, _, CollectorRowView) {
    var CollectorIndexView = Backbone.View.extend({
        initialize: function (options) {
            this.collectors = options.collectors;
            this.collectors.bind('reset', this.addAll, this);
        },

        // populate the html to the dom
        render: function () {
            this.$el.html($('#indexTemplate').html());
            this.addAll();
            return this;
        },

        addAll: function () {
            // clear out the container each time you render index
            this.$el.find('tbody').children().remove();
            _.each(this.collectors.models, $.proxy(this, 'addOne'));
        },

        addOne: function (collector) {
            var view = new CollectorRowView({collectors: this.collectors, collector: collector});
            this.$el.find("tbody").append(view.render().el);
        }
    });
    return CollectorIndexView;
});

Directory structure:

js
   views
     main.js
     ...
   templates
     collector
         indexTemplates.html
   main.js

Thanks.

Answer 1

Not sure is this a typo or not but you have indexTemplates.html in your collector folder and indexTemplate.html in your define().

First make sure that you the text.js plugin in the same folder where your main.js is. Create a new entry in the main.js:

'templates': '../templates'

The template file itself can be a plain .html without the .js extension, and you should be able to reference it by:

var template = require("text!templates/collector/indexTemplate.html")

or in define() if your prefer that way.