Question

I’m building an app with backbone/RequireJs on the front end and node/express on the backend. All written in CoffeeScript. I’m having trouble getting HTML template files to load properly with the text! plugin.

My Config is a s follows:

  require.config 
    paths:
      app:              'app'  
      jquery:           'libs/jquery-1.7.1'
      jqueryTmpl:       'libs/jquery.tmpl'
      jqueryUI:         'libs/jquery-ui-1.8.18.custom.min'
      underscore:       'libs/underscore.amd'
      order:            'libs/order'
      backbone:         'libs/backbone.amd'
      handlebars:       'libs/handlebars'
      bootstrap:        'libs/bootstrap/js/bootstrap'
      marionette:       'libs/backbone.marionette'
      modelbinding:     'libs/backbone.modelbinding'
      validation:       'libs/backbone.validation'
      jqueryQtip:       'libs/jquery.qtip'
      utils:            'utils'
      jqueryDatatables: 'libs/datatables/jquery.dataTables'
      DT_bootstrap:     'libs/datatables/DT_bootstrap'
      user_maintenance: 'templates/tmpl.user.maintenance'

  require [
      "require",
      "jquery",
      "underscore",  
      "backbone",  
      "order!jqueryTmpl",
      "order!marionette",
      "order!validation",
      "app"
  ]

This is the start of one of my views :-

define (require) ->

  Backbone = require 'backbone'
  Backbone.ModelBinding = require 'modelbinding'
  require 'jqueryUI'
  require 'jqueryQtip'

  require '../../scripts/text!user_maintenance.html'
  Utils = require '../../scripts/Utils.js' 

  class UserMaintenanceView extends Backbone.Marionette.ItemView
    template: "#tmpl-user-maintenance"
    className: "row"
    .
    .
    .

If I look at the network tab in Chrome developer tools, the /scripts/templates/tmpl.user.maintenance.html file has been loaded via a GET. Clicking on it shows the contents that appear like so. (I removed the contents for brevity, its just HTML)

<script type="text/x-jquery-tmpl" id="tmpl-user-maintenance">

</script>

I don’t get any script errors, but the template doesn’t appear in the DOM and my view is not rendered. If I simply paste the HTML template into the main HTML file and don’t try to load with the text plugin everything works fine. But I want to break my templates into separate files.

Any idea what I’m doing wrong?

Answer 1

The text!plugin does not inject the text into the DOM, it only loads the given file and it is up to you to process the content. See http://requirejs.org/docs/api.html#text for more information.