2014-02-18 123 views
0

我是新来的js。我有 的index.html骨干并要求js

<html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="/common.css"/> 
    </head> 
    <body> 
     <div id="page"></div> 
     <script data-main="js/main" src="js/lib/require.js"></script> 
    </body> 
</html> 

main.js

require.config({ 
    urlArgs: "_=" + (new Date()).getTime(), 
    baseUrl: "js", 
    paths: { 
     jquery: "lib/jquery", 
     underscore: "lib/underscore", 
     backbone: "lib/backbone" 
    }, 
    shim: { 
     'backbone': { 
      deps: ['underscore', 'jquery'], 
      exports: 'Backbone' 
     }, 
     'underscore': { 
      exports: '_' 
     } 
    } 
}); 

define([ 
    'router' 
], function(
    router 
){ 
    Backbone.history.start(); 
}); 

router.js

define([ 
     'backbone', 
     'views/scoreboard' 
    ], function(
     Backbone, 
     scoreboard 
    ){ 

     var Router = Backbone.Router.extend({ 
      routes: { 
       'scoreboard': 'scoreboardAction', 
       'game': 'gameAction', 
       '*default': 'defaultActions' 
      }, 
      defaultActions: function() { 
       scoreboard.show(); 
       scoreboard.render(); 

      }, 
      scoreboardAction: function() { 
       scoreboard.show(); 
       scoreboard.render(); 
       console.log(scoreboard.render()); 

      }, 
      gameAction: function() { 
       // TODO 
      } 
     }); 

     return new Router(); 
    }); 

scoreboard.js

define([ 
    'backbone', 
    'tmpl/scoreboard' 
], function(
    Backbone, 
    tmpl 
){ 

    var View = Backbone.View.extend({ 

     template: tmpl, 
     initialize: function() { 
      //console.log("Woohoho"); 
      //this.listenTo(this.model, "change", this.render); 
     }, 
     render: function() { 
      //console.log(this.template()); 
      //this.$el.html(this.template(this.model.toJSON())); 
      this.template(); 
      this.$el.html(this.template()); 
     }, 
     show: function() { 
      //console.log("show"); 
      this.$el.html(this.template()); 

     }, 
     hide: function() { 
      alert("Hide"); 
      // TODO 
     } 

    }); 

    return new View(); 
}); 

TMPL/scoreboard.js产生从模板如果我console.log(this.template());我会看到有效的html代码。但在浏览器中我看不到,白屏。我如何显示我的模板?

回答

1

el元素添加到您的看法是这样的:

var View = Backbone.View.extend({ 
    el: '#page', 
    .... 
+0

谢谢你,它为我工作 –