Question

I am following the tuturoial here: http://backbonetutorials.com/organizing-backbone-using-modules/ and all I would like to do is use Mustache instead of underscore.js for my templating engine in a Backbone View. Everything is working as expected until I try to do the replacement of Mustache. Firebug gives me this:

Load timeout for modules: Mustache

My Mustache wrapper (in libs/mustache/mustache-wrap.js) is like so:

define(['libs/mustache/mustache'], function(){
  // Tell Require.js that this module returns a reference to Mustache
  return Mustache;
});

Here is the code for my Backbone View:

// Protocol Detail View
define([
  'jQuery',
  'Underscore',
  'Backbone',
  'Mustache',
  'collections/protocols',
  'text!templates/protocol/protocoldetail.html'
], function($, _, Backbone, Mustache, protocolCollection, protocolDetailTemplate){

    var protocolDetailView = Backbone.View.extend({

        el: "#asset-detail",
        render: function( pid ){
            this.collection = new protocolCollection;
            this.collection.fetch();
            var p = this.collection.getByCid('c'+pid);
            var template = "{{name}}";
            htmlr = Mustache.to_html(template, p);
            $(this.el).html(htmlr);
            //var compiledTemplate = _.template( protocolDetailTemplate, { protocol: protocol });
            //$(this.el).html(compiledTemplate);

        },

        events: {
            "submit #asset-owner": "chown"
        },

        chown: function ( pid ){
            console.log("Protocol Detail View chown callback.")
        }
    });

    return new protocolDetailView;
});

My main.js file has the following config:

require.config({
    paths: {
      jQuery: 'libs/jquery/jquery',
      jQueryUI: '//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min',
      jstree: 'libs/jstree/jquery.jstree',
      Mustache: 'libs/mustache/mustache-wrap',
      Underscore: 'libs/underscore/underscore',
      Backbone: 'libs/backbone/backbone'
  }
});

Answer 1

In you main.js file where you have all you’re requires, make sure to add Mustache to the config, and don’t worry about the wrapper and just try loading Mustache directly.

require.config({ 
    'paths': { 
        "underscore": "libs/underscore", 
        "backbone": "libs/backbone",
        "Mustache": "libs/mustache/mustache"
    }
}); 

That might help…

Also, here are some starter apps to help you out on your require, backbone journey.

https://github.com/jcreamer898/RequireJS-Backbone-Starter
https://github.com/david0178418/BackboneJS-AMD-Boilerplate
https://github.com/addyosmani/backbone-fundamentals
https://github.com/amdjs