javascript - 当 subview 从 Backbone 中的服务获取 JSON 数据时，在父 View 中渲染 subview

Question

我试图在父 View 中渲染 subview 时解决此问题。

父 View 是一个静态的 html block ，它将是用于过滤 subview 的选项卡， subview 是从服务器提取的表格数据。

问题是父 View 和 subview 渲染良好，但 subview 的集合没有数据；但我可以确认该服务正在控制台中返回数据。

这是我的路由器:

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
    };
});

我的父 View ，从路由器调用:

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;
});

然后我想在父 View 模板 HTML 中渲染表格 View :

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;
});

父模板(想要在 .tab-pane 中渲染 subview ):

<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>

subview :

<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>

两者都按顺序渲染，但 subview 不渲染任何数据，仅渲染表头。

不知道如何让它工作？

Answer 1

请参阅 RullDawg 的回答来了解您的部分问题。
另一部分是，您在升级到Backbone 1.0时可能错过了一些事情。 .

“将 Collection 的“update”重命名为 set，以便与类似的 model.set() 并行，并与重置对比。它现在是获取后的默认更新机制。如果您想继续使用“重置”，传递 {reset: true}。“

所以基本上，渲染 subview 的唯一时间是在父 View 中渲染它的时候(顺便说一句，我不知道你为什么这样做)。您监听 reset 事件，但它从未被触发。将其更改为 this.collection.fetch({reset: true}); 并注意要附加到 DOM 的内容，它应该可以工作。

如果您不想使用reset标志，您可以监听更通用的sync事件。