I have a very simple web page which is using backbone simply to load a view from a template file:

<div id="content"></div>

<script src="js/vendor/json2.js"></script>
    <script src="js/vendor/jquery-2.0.2.min.js"></script>
    <script src="js/vendor/underscore-min.js"></script>
    <script src="js/vendor/backbone-min.js"></script>
    <script src="js/flight-match-form.js"></script>
    <script type="text/template" id="template-flight-match">
      <section id="form-search" class="content-inner clearfix">
        <div id="date-container" class="search-row clearfix">
          <label class="search-label" for="date">Travel Date</label>
          <img src="images/structure/icon-calendar.png" alt="calendar" class="calendar">
          <span class="help-text" id="date-unknown">don't know it?</span>
        </div>
        <div id="flight-container" class="search-row clearfix">
          <label class="search-label" for="date">FLIGHT #</label>
          <input type="text" class="search-input" id="input-flight" pattern="[a-zA-Z0-9]+">
          <span class="help-text" id="date-unknown">don't know it?</span>
        </div>
        <button id="button-match">
          Match
          <img src="images/structure/icon-arrow.png" height="15" width="20" alt="Submit Arrow">
        </button>
      </section>
    </script>

and in flight-match-form.js, I simply say:

$(document).ready(function(){

    var MatchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            // Compile the template using underscore
            var template = _.template( $("#template-flight-match").html(), {} );
            // Load the piled HTML into the Backbone "el"
            this.$el.html( template );
        }
    });

    var matchView = new MatchView({ el: $("#content") });

});

This works great, and all I really wanted to do next was to get all that html out of a script tag and into a proper HTML file, where I think it belongs. So, does anyone know the simplest way to do this?

I tried to follow this tutorial, and it lead me down this big rabbit hole where I ended up using require.js and the text module, and a router, and two new js files (main and app), along with a view and a template. I'm currently getting an error in the view stating that Backbone cannot read property 'view' of undefined. This is my code:

In index.html, I include require.js, and make it reference main.js as the inital file:

then in main.js, I specify a template directory, and send it off to app.js:

require.config({
  paths: {
    jquery: 'vendor/jquery/jquery-2.0.2.min',
    underscore: 'vendor/underscore/underscore-min',
    backbone: 'vendor/backbone/backbone-min',
    templates: '../templates'
  }
});

require([
  'app',
], function(App){
  App.initialize();
});

In app.js, I initialize the router:

define([
  'jquery',
  'underscore',
  'backbone',
  'router', // Request router.js
], function($, _, Backbone, Router){
  var initialize = function(){
    // Pass in our Router module and call it's initialize function
    Router.initialize();
  };

  return {
    initialize: initialize
  };
});

and in router.js, I set up a route for my view:

// Filename: router.js
define([
  'jquery',
  'underscore',
  'backbone',
  'views/search/SearchFormView'
], function($, _, Backbone, SearchFormView) {

  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      'search': 'SearchFormView'
    }
  });

  var initialize = function(){

    var app_router = new AppRouter;

    app_router.on('route:SearchFormView', function(){

        // Call render on the module we loaded in via the dependency array
        var searchView = new SearchFormView();
        searchView.render();

    });
    Backbone.history.start();
  };
  return {
    initialize: initialize
  };
});

Lastly, I just create that view, which will load my template:

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/search/search-form-template.html'

], function($, _, Backbone, searchFormTemplate){
  var SearchFormView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using underscore
        var template = _.template( $("#template-flight-match").html(), {} );
        // Load the piled HTML into the Backbone "el"
        this.$el.html( template );
    }
  });
  return SearchFormView;
});

but it's not working, and I can't figure out why. Any help is much appreciated. Apologize for the excessive amount of code, but all of it seems to be necessary just to load this stuff the proper way.

I have a very simple web page which is using backbone simply to load a view from a template file:

<div id="content"></div>

<script src="js/vendor/json2.js"></script>
    <script src="js/vendor/jquery-2.0.2.min.js"></script>
    <script src="js/vendor/underscore-min.js"></script>
    <script src="js/vendor/backbone-min.js"></script>
    <script src="js/flight-match-form.js"></script>
    <script type="text/template" id="template-flight-match">
      <section id="form-search" class="content-inner clearfix">
        <div id="date-container" class="search-row clearfix">
          <label class="search-label" for="date">Travel Date</label>
          <img src="images/structure/icon-calendar.png" alt="calendar" class="calendar">
          <span class="help-text" id="date-unknown">don't know it?</span>
        </div>
        <div id="flight-container" class="search-row clearfix">
          <label class="search-label" for="date">FLIGHT #</label>
          <input type="text" class="search-input" id="input-flight" pattern="[a-zA-Z0-9]+">
          <span class="help-text" id="date-unknown">don't know it?</span>
        </div>
        <button id="button-match">
          Match
          <img src="images/structure/icon-arrow.png" height="15" width="20" alt="Submit Arrow">
        </button>
      </section>
    </script>

and in flight-match-form.js, I simply say:

$(document).ready(function(){

    var MatchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            // Compile the template using underscore
            var template = _.template( $("#template-flight-match").html(), {} );
            // Load the piled HTML into the Backbone "el"
            this.$el.html( template );
        }
    });

    var matchView = new MatchView({ el: $("#content") });

});

This works great, and all I really wanted to do next was to get all that html out of a script tag and into a proper HTML file, where I think it belongs. So, does anyone know the simplest way to do this?

I tried to follow this tutorial, and it lead me down this big rabbit hole where I ended up using require.js and the text module, and a router, and two new js files (main and app), along with a view and a template. I'm currently getting an error in the view stating that Backbone cannot read property 'view' of undefined. This is my code:

In index.html, I include require.js, and make it reference main.js as the inital file:

then in main.js, I specify a template directory, and send it off to app.js:

require.config({
  paths: {
    jquery: 'vendor/jquery/jquery-2.0.2.min',
    underscore: 'vendor/underscore/underscore-min',
    backbone: 'vendor/backbone/backbone-min',
    templates: '../templates'
  }
});

require([
  'app',
], function(App){
  App.initialize();
});

In app.js, I initialize the router:

define([
  'jquery',
  'underscore',
  'backbone',
  'router', // Request router.js
], function($, _, Backbone, Router){
  var initialize = function(){
    // Pass in our Router module and call it's initialize function
    Router.initialize();
  };

  return {
    initialize: initialize
  };
});

and in router.js, I set up a route for my view:

// Filename: router.js
define([
  'jquery',
  'underscore',
  'backbone',
  'views/search/SearchFormView'
], function($, _, Backbone, SearchFormView) {

  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      'search': 'SearchFormView'
    }
  });

  var initialize = function(){

    var app_router = new AppRouter;

    app_router.on('route:SearchFormView', function(){

        // Call render on the module we loaded in via the dependency array
        var searchView = new SearchFormView();
        searchView.render();

    });
    Backbone.history.start();
  };
  return {
    initialize: initialize
  };
});

Lastly, I just create that view, which will load my template:

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/search/search-form-template.html'

], function($, _, Backbone, searchFormTemplate){
  var SearchFormView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using underscore
        var template = _.template( $("#template-flight-match").html(), {} );
        // Load the piled HTML into the Backbone "el"
        this.$el.html( template );
    }
  });
  return SearchFormView;
});

but it's not working, and I can't figure out why. Any help is much appreciated. Apologize for the excessive amount of code, but all of it seems to be necessary just to load this stuff the proper way.

• javascript
• jquery
• backbone.js
• requirejs

• did you step through the code to figure out where the execution fails using dev tools or firebug? – Evan Commented Jun 12, 2013 at 15:21
• Having the line that actually triggers the error would help. Require is helpful for that. – Loamhoof Commented Jun 12, 2013 at 15:39
• The console lists the problem at this line: var SearchFormView = Backbone.View.extend({ – mheavers Commented Jun 12, 2013 at 15:50
• I noticed that if I log Backbone in the view, it es up as undefined. Why would that be? – mheavers Commented Jun 12, 2013 at 16:27
• 2 are you using the AMD version of Backbone? knowing this is important if you are not using the AMd version you need to shim backbone in your app.ja file – Rayweb_on Commented Jun 12, 2013 at 16:38

3 Answers 3

At the moment you actually have a problem with your config. Backbone is not an AMD module, so you have to use the shim option of requirejs. Well, the example speaks for itself as it's about Backbone.

you have to use the template that you are requiring in this case, searchFormTemplate instead of trying to get it with jquery.

The text plugin will deliver you the right HTML and it will be enclosed in the variable searchFormTemplate so you can use it.

change this in yhe render function of your SearchFormeView

render: function(){
    // Compile the template using underscore
    var template = _.template(searchFormTemplate, {} ); // 
    // Load the piled HTML into the Backbone "el"
    this.$el.html( template );
}

Install the text plugin which is available at https://github./requirejs/text

Then proceed to define the plugin in here:

require.config({
  paths: {
    text: '{{directory where you put text.js}}',
  }
});

Since we are at this topic, requirejs-tpl-plugin is a better option https://github./jfparadis/requirejs-tpl