utilizzando richiedere e spina dorsale per caricare i modelli tramite file html e non tag script

Question

Ho una pagina web molto semplice che utilizza spina dorsale semplicemente caricare una vista da un file di modello:

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

e in volo-partita -form.js, dico semplicemente:

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

}); 

Questa grande opera, e tutto quello che veramente volevo fare successivo è stato quello di ottenere tutto ciò che html di un tag script e in un file HTML corretta, dove penso che appartiene. Quindi, qualcuno conosce il modo più semplice per farlo?

Ho provato a seguire this tutorial e mi ha portato in questa grande tana del coniglio dove ho finito con require.js e il modulo di testo, un router e due nuovi file js (principale e app), insieme a un vista e un modello. Attualmente sto ricevendo un errore nella vista che afferma che Backbone non può leggere la 'vista' delle proprietà di undefined. Questo è il mio codice:

In index.html, includo require.js, e renderlo riferimento main.js come file inital:

poi nel main.js, ho specificare una directory template, e inviarlo via 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(); 
}); 

in app.js, ho inizializzare il 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 
    }; 
}); 

e in router.js, ho creato un percorso per il mio vie w:

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

Infine, ho solo creare quella vista, che caricherà il mio modello:

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

ma non sta funzionando, e non riesco a capire perché. Ogni aiuto è molto apprezzato. Chiedere scusa per l'eccessiva quantità di codice, ma tutto sembra essere necessario solo per caricare questa roba nel modo corretto.

Answer 1

Al momento è in realtà hanno un problema con il config. Backbone non è un modulo AMD, quindi è necessario utilizzare l'opzione shim di requirejs. Bene, l'esempio parla da solo in quanto riguarda Backbone.

Answer 2

installare il plugin di testo di cui dispone https://github.com/requirejs/text

Quindi procedere a definire il plugin qui:

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

Dato che siamo a questo argomento, requirejs-TPL-plugin è una scelta migliore https://github.com/jfparadis/requirejs-tpl

Answer 3

devi usare il modello che stai richiedendo in questo caso, searchFormTemplate invece di provare a farlo con jquery.

Il plug-in di testo fornirà il codice HTML corretto e verrà incluso nella variabile searchFormTemplate in modo da poterlo utilizzare.

cambiamento questa funzione in yhe rendering di tuo SearchFormeView

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