我在昨天問了一個問題，這很有幫助。主幹JSON集合到模板輸出

我已經重寫了大部分的代碼，通過以下教程和youtube視頻以及在stackoverflow上的幫助，但是我不確定當把JSON數據推送到下劃線模板時我做錯了什麼。

基本上我想從json數組中取數據，循環並顯示它。我見過的教程通過.get做到了這一點，但沒有使用json數組。任何幫助表示讚賞。

我的代碼如下所示：（我已經把一個評論我想事情會錯行）

<body> 
    <div class="News"></div> 

    <script type="text/template" id="NewsTemplate"> 
    <table>     
     <% _.each(NewsCollection, function(item) { %>   
     <tr> 
      <td><%= item.title %></td> 
     </tr>   
     <% }); %> 
    </table> 
    </script> 

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script> 

    <script type="text/javascript"> 
    var NewsModel = Backbone.Model.extend({ }); 

    // backbone collection, gather google news json array 
    var NewsCollection = Backbone.Collection.extend({ 
     url: 'data.js' 
    }) 

    var NewsList = Backbone.View.extend({    
     el: '.News', 
     template: _.template($("#NewsTemplate").html()),    
     render: function() { 
     var that = this; 
     var NewsItems = new NewsCollection(); 
      NewsItems.fetch({ 

      //guessing im doing something wrong here? 

      success: function (NewsItems) { 
      $(this.el).html(that.template({'collection.toJSON': NewsItems.toJSON()})); 
      } 
     }) 
     }     
    });  

    // Backbone router do action on homepage load 
    var Router = Backbone.Router.extend({    
     routes: { 
     '': 'home' 
     }    
    }); 

    var newslist = new NewsList();   

    var router = new Router();   
    router.on('route:home' , function(){ 
     newslist.render(); 
    }); 

    Backbone.history.start(); 
    </script> 
</body>

來源

2013-12-17 user2391468

試試這個：替換以下行

success: function (NewsItems) { 
    $(this.el).html(that.template({'collection.toJSON': NewsItems.toJSON()})); 
}

與

success: function (NewsItems) { 
    $(this.el).html(that.template({ newsItems: NewsItems.toJSON()})); 
}

更新模板爲：

<script type="text/template" id="NewsTemplate"> 
    <table>     
     <% _.each(newsItems, function(item) { %>   
     <tr> 
      <td><%= item.title %></td> 
     </tr>   
     <% }); %> 
    </table> 
    </script>

來源

2013-12-17 14:25:59 ram

嘿謝謝你的回覆:)我做了這些修改，但我不確定它甚至達到了模板部分。我可以在其中放置

測試

，它甚至沒有顯示。如果這有道理？ – user2391468

那裏你好像有一個對象。 [對象] 0：對象長度：1 __proto__：數組[0] 在某些刷新它似乎沒有雖然出現。大約80％的時間在那裏：o – user2391468

現在很明顯你的模板很好。由於你正在獲取空陣列。將另一個調試行放在成功函數中作爲'console.log（NewsItems.toJSON（））;'。 – ram

主幹JSON集合到模板輸出

回答

測試

相關問題