Question

昨天我问了一个问题，这个问题很有帮助。

我已经通过以下教程和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>

Answer 1

试试这个：替换以下行

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>

Backbone JSON集合到模板输出

1 个答案: