0

親ビューでサブビューをレンダリングするときに、この問題を解決しようとしています。

親ビューは、サーバーからプルされた表形式のデータであるサブビューをフィルタリングするためのタブとなる html の静的チャンクです。

問題は、親ビューとサブビューは正常にレンダリングされますが、サブビューのコレクションにはデータがないことです。サービスがコンソールでデータを返していることを確認できます。

これは私のルーターです：

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

ルーターから呼び出された私の親ビュー:

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

次に、親ビュー テンプレート 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;
});

親テンプレート (.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>

サブビュー:

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

どちらも順番にレンダリングされますが、サブビューはテーブル ヘッダーだけのデータをレンダリングしません。

これを機能させる方法がわかりませんか？

4

3 に答える 3

1

追加するときは、子の el を指定する必要があります。

から

this.$el.append(this.innerView.render());

に

this.$el.append(this.innerView.render().el);
于 2013-04-19T07:49:28.607 に答える
1

私が理解しているのは、コレクションがバックエンドにデータを持っている間、データをレンダリングしていないということです。コードに欠陥があります。fetch() は非同期呼び出しです。したがって、ビューのレンダリング中にデータが利用可能であることを確認するには、成功ハンドラーを書き込みます。たとえば、OverAllLeatherBoardView にフェッチ コードが表示されている場合は、フェッチのロジックを render() 関数に移動します。

initialize: function(){
            this.collection = new OverallLeaderboardCollection();
            this.collection.bind('reset', _.bind(this.render, this));
            //this.collection.fetch(); move it to render function
        },
        render: function(){
            console.log('render overall leaderboard');
            this.collection.fetch({success: $.proxy(myDelegate, this)})
            //this.$el.append(this.template({players: this.collection.toJSON()})); move it to delegate
        },
        //here you go
        mDelegate:function(model, response, options){
          this.$el.append(this.template({players: model.toJSON()}));
        }
于 2013-04-19T09:13:04.730 に答える