模型無法在Backbone.js中渲染

我正在用Backbone.js和Forge構建一個簡單的移動JavaScript應用程序。我想要做的是有一個建議模型和這些模型的類別集合，並創建一個建議，並使用下劃線模板在視圖中渲染。但是這個建議並沒有被渲染出來。這裏的main.js文件：模型無法在Backbone.js中渲染

(function ($) { 
    forge.enableDebug(); 

    var Suggestion = Backbone.Model.extend({ 

     urlRoot: function() { 
      if (this.isNew()){ 
       return "/suggestions" 
      } 
      "/suggestions/" + this.id + ".json" 
     }, 
     defaults: { 
      id: this.Category.length + 1, 
      title: "A Suggestion", 
      description: "You should go suggest something", 
      ranking: 1, 
      done: false, 
     }, 
     initialize: function() { 
      forge.logging.log('The suggestion model has been initialized') 
     }, 

    }); 


    var Category = Backbone.Collection.extend({ 
     model: Suggestion, 

     urlRoot: function(){ 
      '/suggestions' 
     }, 

     random: function(){ 
      var randomnumber=Math.floor(Math.random()*this.length + 0) 
      forge.logging.log("just randomized" + randomnumber) 
     }, 
     initialize: function(){ 
      forge.logging.log("app initiliazed") 
      //this.fetch(); 
     }, 

     addSuggestions: function(suggestions){ 

     }, 

    }}); 


    Router = Backbone.Router.Extend({ 
     routes:{ 
      "":"index", 
      "suggestion/:suggestion_id":"Suggestion" 
     }, 

     index: function(){ 
      category.index(); 
     } 
    }); 
    SuggestionView = Backbone.View.Extend({ 

     model: Suggestion 
     el: $('#suggestions') 
     tagName: "div", 

     className: "suggestion" 

     template: _.template($("#SuggestionTemplate").html()) 

     render: function(){ 
      $(this.el).html(template(this.model.toJSON())); 
     }, 

     events:{ 
      "tap li": "DetailedView" 
     }, 

     initialize: function(){ 
      forge.logging.log("rendering suggestions") 
      this.render(); 
     } 




    }); 
    DetailedView = Backbone.View.Extend({ 

     model: Suggestion 
     template: _.template($("#DetailedTemplate").html) 

     render: function(){ 
      this.$el.html(template(this.model.toJSON)) 
     } 
    }); 
    CategoryView = Backbone.View.Extend({ 
     el:$("#main") 
     tagname: "div", 

     initialize: function(){ 
      forge.logging.log("rendering Suggestions") 
      this.render(); 

     }, 

     render: function(){ 
      this.Suggestions.each(this.addOne) 
     } 
     addOne: function(suggestion){ 
      var view = new SuggestionView 
      this.$el.append(view.render().el) 
     } 


    }); 

    var suggestion1 = new Suggestion() 
    suggestion1.set(title:"this") 

    var category = new Category(); 
    var router = new Router(); 
    var categoryView = new CategoryView(); 


} (jQuery));

而且index.html的：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Just The Best</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" /> 
    <script type="text/javascript" src="js/underscore.js"></script> 
    <script type="text/javascript" src="js/backbone.js"></script> 
    <script data-main="scripts/main" src="js/require.js"></script> 
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 

    <script type="text/javascript" src="js/main.js"></script> 

    <script src="https://trigger.io/catalyst/target/target-script-min.js#47DC7BF1-5D55-4549-8B64-216CA27A73FF"></script> 

    <link rel="stylesheet" href="css/style.css" /> 

</head> 
<body> 

<div data-role="page"> 
    <div id="#main"> 

    </div> 


</div> 
<script type="text/html" id="SuggestionTemplate"> 
    //<div class="suggestion"> 
     <h2>Suggestion</h2> 
     <h3><%=Suggestion.title%></h3> 

    //</div> 
</script> 

</body>

，我真的很抱歉，如果我的一個基本特徵錯過了。謝謝。

來源

2012-08-12 MichaelFine

'CategoryView'中的'this.Suggestions'來自哪裏？ – 2012-08-12 03:49:05

'CategoryView's'集合是'Category'，它有一個模型'Suggestion'。我以爲你可以稱這個模型爲一個函數，但也許不是。 – MichaelFine 2012-08-12 14:18:22

通過el來查看構造函數而不是extend()更爲常見。至於其餘的部分，你可能想要更類似於以下的東西。另外，你的代碼缺少大量的分號和逗號。

CategoryView = Backbone.View.Extend({ 

    // ... 

    render : function() { 

     this.collection.each(_.bind(this.addOne, this)); 

    }, 

    addOne : function(suggestion) { 

     var view = new SuggestionView({ model : suggestion }); 

     this.$el.append(view.render().el); 

    } 

}); 


var category = new Category([ 

    { title : "this" } 

]); 

var router = new Router(); 

var categoryView = new CategoryView({ 

    collection : category 

});

來源

2012-08-12 04:04:55 JMM

模型無法在Backbone.js中渲染

回答

相關問題