So I have already looked into this entry: Loading mustache using requirejs.
However, it still hasn't fixed my problem. When I try to compile a html file with Mustache it says that Mustache is null.
If the following files aren't enough info to pin-point the problem, my repo is here.
main.js
require.config({
baseUrl: 'scripts/lib',
paths:{
util : '../util',
models : '../util/models',
views : '../util/views',
collections : '../util/collections',
routers : '../util/routers',
templates : '../../templates',
mustache : 'mustache/mustache',
mustacheWrap: 'mustache/mustachewrapper'
},
shim:{
'underscore' : {
exports: '_'
},
'backbone' : {
deps:['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
require([
'util/init'
],
function(App) {
App.init();
console.log("All files loaded successfully!");
});
DisplaySeries.js
define([
'underscore',
'jquery',
'backbone',
'mustacheWrap',
'text!templates/Comic.html',
'collections/Comics'
],
function(_, $, Backbone, Mustache, Template, ComicCollection) {
return Backbone.View.extend({
el: '#pane-container',
compiledTemplate: Mustache.compile(Template), <------ Mustache is Null
initialize:function() {
console.log("DisplaySeriesView: created...");
this.initData();
},
initData:function() {
this.collections.comics = new ComicCollection();
this.collections.comics.fetch({
success:function() {
console.log("DisplaySeriesView: fetch succeeded.");
this.JSON.comics = this.collections.comics.toJSON();
this.render();
},
error:function() {
console.error("DisplaySeriesView: fetch failed.");
}
});
},
render:function() {
this.$el.html(compiledTemplate({comics : this.JSON.comics}));
return this;
}
});
});
First of all, looks like you grabbed the wrong file when downloading Mustache.js. https://github.com/HerrPfister/comic-checklist-app/blob/master/app/scripts/lib/mustache/mustache.js is the actual HTML page for Mustache.js file (i.e. not raw source code).
Moreover, the question you linked is outdated (I can see I even flagged that a year ago). Mustache is already AMD-compliant so you should be able to simply require it via 'mustache', provided it's included in the paths
configuration element:
requirejs.config({
paths: {
mustache: 'path/to/mustache'
}
});
require([
'mustache'
], function (Mustache) {
console.log('Mustache loaded?', Mustache);
});