Question

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;
        }
    });
});
Was it helpful?

Solution

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);
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top