javascript - Render a sub-view in a parent when the sub-view fetched JSON data from service in Backbone -

am trying solve issue when rendering sub view in parent view.

the parent view static chunk of html tabs filtering sub-view tabular data pulled server.

the issue parent , sub-view render fine sub-view's collection has no data; can confirm service returning data in console.

this router:

define([     'domlib',     'underscore',     'backbone',     'bootstrap',     'view/logged-out',     'view/leaderboard',     'view/leaderboard-filter',       'view/leaderboard-overall',     'view/login',     'view/navigation' ], function($, _, backbone, bootstrap, loggedoutview, leaderboardview, leaderboardfilter, overallleaderboardview, loginview, navigationview) {     var approuter = backbone.router.extend({         routes: {             '': 'index',             'leaderboard': 'leaderboard',             'login': 'login'         },         index: function () {             var loggedoutview = new loggedoutview();         },         leaderboard: function(){             var leaderboardfilter = new leaderboardfilter();             //var overallleaderboardview = new overallleaderboardview();         },         login: function(){             var loginview = new loginview();         }     });      var initialize = function(){          var app_router = new approuter,             leaderboardview = new leaderboardview(),             navigationview = new navigationview();          backbone.history.start();     };      return {         initialize: initialize     }; }); 

my parent view, called router:

define([     'domlib',     'underscore',     'backbone',     'router',     'view/leaderboard-overall',     'text!template/leaderboard-filter.html'     ],     function($, _, backbone, router, overallleaderboardview, leaderboardfiltertemplate) {          var leaderboardfilterview = backbone.view.extend({             el: 'section[role="main"]',             template: _.template(leaderboardfiltertemplate),             initialize: function(){                 this.innerview = new overallleaderboardview();                 this.render();             },             render: function(){                 this.$el.append(this.template());                 this.$el.append(this.innerview.render());             }         });          return leaderboardfilterview; }); 

then render table view in parent view template html:

define([     'domlib',     'underscore',     'backbone',     'router',     'collection/leaderboard-overall',     'text!template/leaderboard-overall.html'     ],     function($, _, backbone, router, overallleaderboardcollection, overallleaderboardtemplate) {          var overallleaderboardview = backbone.view.extend({             el: 'section[role="main"]',             template: _.template(overallleaderboardtemplate),             initialize: function(){                 this.collection = new overallleaderboardcollection();                 this.collection.bind('reset', _.bind(this.render, this));                 this.collection.fetch();             },             render: function(){                 console.log('render overall leaderboard');                 this.$el.append(this.template({players: this.collection.tojson()}));             }         });          return overallleaderboardview; }); 

parent template (would render sub-view in .tab-pane):

<nav id="leaderboard-filter">     <ul class="nav nav-tabs">         <li class="active"><a href="#all-time">all time</a></li>         <li><a href="#today">today</a></li>         <li><a href="#week">this week</a></li>         <li><a href="#month">this month</a></li>     </ul> </nav> <section>     <div class="tab-content">         <div class="tab-pane">             <!-- render leaderboard -->         </div>     </div>   </section> 

sub-view:

<table class="table table-bordered table-striped">     <thead>                                      <tr>             <th>rank</th>             <th>player</th>             <th>games completed</th>             <th>high score</th>             <th>percent correct</th>             <th>avg answer time</th>             <th>cumulative score</th>         </tr>     </thead>     <tfoot>         <!-- logged in user details here -->     </tfoot>     <tbody>         <% _.each(players, function(player, index){ %>             <tr>                 <td><%= index + 1 %></td>                 <td><a href="/hyc-web/"><%= _.escape(player.user) %></a></td>                 <td><%= player.games_completed %></td>                 <td><%= player.high_score %></td>                 <td><%= player.percent_correct %></td>                 <td><%= player.avg_answer_time %></td>                 <td><%= player.cumulative_score %></td>             </tr>                    <% }); %>                                        </tbody> </table> 

both render in order sub-view not render data table headers.

can;t figure out how working?

see rulldawg's answer part of problem.
other part you're missed few things while upgrading backbone 1.0.

"renamed collection's "update" set, parallelism similar model.set(), , contrast reset. it's default updating mechanism after fetch. if you'd continue using "reset", pass {reset: true}."

so basically, time render subview when render in parent view (i don't know why you're doing btw). listen reset event while it's never triggered. change this.collection.fetch({reset: true}); , careful of you're appending dom , should work.

if don't want use reset flag, listen more generic sync event.