utilizando require y backbone para cargar templates a través de un file html y no una label de script

Tengo una página web muy simple que está utilizando la networking troncal simplemente para cargar una vista desde un file de plantilla:

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

y en flight-match-form.js, simplemente digo:

 $(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") }); }); 

Esto funciona muy bien, y todo lo que realmente quería hacer después era sacar todo ese html de una label de script y en un file HTML apropiado, donde creo que pertenece. Entonces, ¿alguien sabe la forma más sencilla de hacer esto?

Traté de seguir este tutorial , y me llevó a este gran agujero de conejo donde terminé usando require.js y el module de text, y un enrutador, y dos nuevos files js (principal y aplicación), junto con una vista y un model. Actualmente recibo un error en la vista que indica que Backbone no puede leer la propiedad 'view' de indefinido. Este es mi código:

En index.html, incluyo require.js y lo hago reference main.js como el file inicial:

luego en main.js, especifico un directory de templates, y lo envío a 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(); }); 

En app.js, inicializo el enrutador:

 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 }; }); 

y en router.js, configuré una ruta para mi vista:

 // 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 }; }); 

Por último, simplemente creo esa vista, que cargará mi plantilla:

 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; }); 

pero no está funcionando, y no puedo entender por qué. Cualquier ayuda es muy apreciada. Discúlpate por la cantidad excesiva de código, pero todo parece ser necesario solo para cargar esto de la manera correcta.

Por el momento, tienes un problema con tu configuration. Backbone no es un module AMD, por lo que debe usar la opción shim de requirejs . Bueno, el ejemplo habla por sí solo, ya que se trata de Backbone.

debe usar la plantilla que necesita en este caso, searchFormTemplate en lugar de intentar getlo con jquery.

El complemento de text le entregará el HTML correcto y se includeá en la variable searchFormTemplate para que pueda usarlo.

cambie esto en la function de renderización de su SearchFormeView

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

Instale el complemento de text que está disponible en https://github.com/requirejs/text

Luego proceda a definir el complemento aquí:

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

Como estamos en este tema, requirejs-tpl-plugin es una mejor opción https://github.com/jfparadis/requirejs-tpl