CODEWITHSUNDEEP
javascriptjquerybackbone.jsrequirejs
mheavers
mheavers

Reputation: 30188

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

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 compiled 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 compiled 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.

Upvotes: 6

Views: 5787

Answers (3)

Loamhoof
Loamhoof

Reputation: 8293

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.

Upvotes: 3

Rayweb_on
Rayweb_on

Reputation: 3727

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 compiled HTML into the Backbone "el"
    this.$el.html( template );
}

Upvotes: 1

Ian Lim
Ian Lim

Reputation: 4274

Install the text plugin which is available at https://github.com/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.com/jfparadis/requirejs-tpl

Upvotes: 0

Related Questions