Backbone + Lenker

Question

Ich bin neu in Backbone und Lenker und versuche, ein einfaches Szenario zu emulieren. Ich habe zwei htm Seiten:

index.htm:

<div id="home"> 

    <h1 align="center">Music Paradise</h1> 
    <div id="navigation" align="center"> 
    <p align="center">Search for bands of your choice</p> 
    <a href="#/SearchBands">Search Bands</a> 
    <p align="center">Search for concerts of your choice</p> 
    <a href="#/SearchConcerts">Search Concerts</a> 
    </div> 
</div> 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
<script type="text/javascript" src="../js/backbone.js"></script> 
<script type="text/javascript" src="../js/route.js"></script> 

Ein Router Seite:

var BandView = Backbone.View.extend({ 
     template: Handlebars.compile($("#SearchBands-template").html()),  
     initialize: function() { 
      this.render(); 
     }, 

     render: function() { 
      this.$el.html(this.template({greeting:"Welcome to Search Bands Feature!"})); 

     } 
    }); 


var ConcertView = Backbone.View.extend({ 
     template: Handlebars.compile($("#SearchBands-template").html()),  
     initialize: function() { 
      this.render(); 
     }, 
     render: function() { 
     this.$el.html(this.template({content:"Welcome to Search Concerts Feature!"})); 

     } 
    }); 


    var AppRouter = Backbone.Router.extend({ 
     routes: {   
      'SearchBands': 'bandRoute', 
      'SearchConcerts': 'concertRoute',   
     }, 
     bandRoute: function() { 
      var bandView = new BandView();   
      $("#data").html(bandView.el); 
     }, 
     concertRoute: function() { 
      var concertView = new ConcertView();   
      $("#data").html(concertView.el); 
     } 
    }); 

    var appRouter = new AppRouter(); 
    Backbone.history.start(); 

und die dritte htm Seite, wo die Ergebnisse weitergeleitet werden soll.

searchBands.htm

<div id="home"> 

    <h1 align="center">Music Paradise</h1> 

<div id="data"> 
</div> 

    <script type="text/template" id="SearchBands-template"> 
     <h1>Please Search Bands</h1> 
    {{ greeting }} 
    </script> 



    <script type="text/template" id="SearchConcerts-template"> 
     <h1>Please Search Concerts</h1> 
     {{ content }} 
    </script> 


</div> 

ich die folgende Störung erhalte: handlebars.min.js: 27 nicht erfasste Fehler: Sie müssen einen String oder Lenker AST Handlebars.compile passieren. Du hast unbestimmt bestanden.

Ich denke, das ist wegen route.js immer noch nicht wissen über searchBands.htm und irgendwie muss ich searchBands.htm vorher laden.

Danke.

Answer 1

Backbone und sein Hash-basiertes Routing, das Sie verwenden möchten, wurde für Einzelseitenanwendungen entwickelt.

Ihre <script> Tags, die Vorlagen enthalten, sollten in index.html selbst verfügbar sein, bevor Ihr Anwendungsskript für jQuery ausgeführt wird, um es über id selector zu finden.

Wenn Sie Ihre Vorlagen in verschiedenen HTML-Dateien behalten möchten, sollten Sie sie irgendwie mit AJAX laden und an den Lenker übergeben. Wie Sie dies tun, hängt von der breiteren App-Struktur ab. Wenn Sie beispielsweise RequireJS verwenden, können Sie das Text-Plugin verwenden oder Sie können die load-Methode von jQuery verwenden.