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

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.