我在昨天问了一个问题，这很有帮助。主干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集合到模板输出

回答

测试

相关问题