2013-05-24 4 views
1

Je viens d'obtenir un écran vide. Qu'est-ce que je fais mal?Ma vue backbone.js ne restitue rien

index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="HandheldFriendly" content="true"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="underscore/underscore-min.js"></script> 
    <script src="backbone/backbone-min.js"></script> 
    <script type="text/template" id="view-navigation-bar-template"> 
     <ul> 
      <li><input type="button" value="Day" /></li> 
      <li ><input type="button" value="Week" /></li> 
      <li><input type="button" value="Month" /></li> 
     </ul> 
    </script> 
    <script src="common.js"></script> 
</head> 

<body> 
    <div id="view-navigation-bar" class="button-list"> 
     <!-- Insert view-navigation-bar_template here --> 
    </div> 
</body> 
</html> 

common.js

ViewNavigationBarView = Backbone.View.extend({ 
    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     var template = _.template($("#view-navigation-bar-template").html(), {}); 
     this.$el.html(template); 

     return this; 
    } 
}); 

viewNavigationBarView = new ViewNavigationBarView({ el: $("#view-navigation-bar") }); 
+2

... Vous attendez même pas pour le document d'événement prêt? –

+0

Ah, c'est un problème de simultanéité? – MdaG

+0

Oui, ça a marché. Merci Sébastien! – MdaG

Répondre

3

La réponse à la question invoquée en l'absence d'un auditeur document.ready de l'OP. Les vues Backbone n'attendent pas que le DOM soit disponible. L'insertion immédiate n'a donc rien fait.

Quick fix: l'envelopper dans $(document).ready(function() { });

Questions connexes