Using require and backbone to load templates via html file, not script tag

Question

I have a very simple webpage that uses a trunk just 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 just 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 compiled HTML into the Backbone "el" this.$el.html( template ); } }); var matchView = new MatchView({ el: $("#content") }); }); 

This works fine, and all I really wanted to do next was get all this html from the script tag and into the proper HTML file, where, in my opinion, it belongs. So, does anyone know the easiest way to do this?

I tried to follow this tutorial and it led me to this big rabbit hole where I ended up using require.js and a text module, as well as a router and two new js files (main and app) along with a view and a template. I am currently receiving an error message indicating that the Backbone cannot read the 'view' property from undefined. This is my code:

In index.html, I include require.js and make a link to main.js as an inital file:

then in main.js, I will specify the template directory and send it 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 initialize function Router.initialize(); }; return { initialize: initialize }; }); 

and in router.js, I configured the 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 }; }); 

Finally, I just create this view that 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 compiled HTML into the Backbone "el" this.$el.html( template ); } }); return SearchFormView; }); 

but it does not work, and I cannot understand why. Any help is much appreciated. Sorry for the excessive amount of code, but it all seems necessary to download this material properly.

Answer 1

At the moment, you really have a problem with your configuration. Backbone is not an AMD module, so you need to use the shim version of requirejs . Well, the example speaks for itself as a Backbone.

Answer 2

you should use the template you need in this case, searchFormTemplate, and not try to get it using jquery.

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

change this in your render function of your SearchFormeView

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

Answer 3

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

Then go to the plugin definition here:

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

Since we are in this thread, requirejs-tpl-plugin is the best option https://github.com/jfparadis/requirejs-tpl