骨干和下划线模板一个简单的视图

Backbone and underscore - templating a simple view

本文关键字：一个 简单 视图 下划线      更新时间：2023-09-26

我在Backbone和underscore中创建的第一个模板视图不太成功。

我从下划线库中得到'players is not defined error'。

这是我的模型:

define([
    'domLib',
    'underscore',
    'backbone',
    'router'
    ],
    function($, _, Backbone, Router) {
        var PlayerModel = Backbone.Model.extend({
            defaults: {
                username: '',
                rank: 0,
                score: 0
            }
        });
        return PlayerModel;
});

这是我的收藏:

define([
    'domLib',
    'underscore',
    'backbone',
    'router',
    'model/player'
    ],
    function($, _, Backbone, Router, PlayerModel) {
        var LeaderboardCollection = Backbone.Collection.extend({
            model: PlayerModel,
            url: '/hyc-web/leaderBoard/topOverall?count=5'
        });
        return LeaderboardCollection;
});

关联视图:

define([
    'domLib',
    'underscore',
    'backbone',
    'router',
    'collection/leaderboard',
    'text!template/leaderboard.html'
    ],
    function($, _, Backbone, Router, LeaderboardCollection, LeaderboardTemplate) {
        var LeaderboardView = Backbone.View.extend({
            el: '#leaderboard',
            template: _.template(LeaderboardTemplate),
            initialize: function(){
                this.collection = new LeaderboardCollection();              
                this.collection.on('reset', this.render, this); 
                this.collection.fetch();                                        
            },
            render: function(){         
                console.log(this.collection.models);
                this.$el.html(this.template, {players: this.collection.models});
            }
        });
        return LeaderboardView;
});

和模板本身:

<table class="table table-bordered">
    <thead>                             
        <tr>
            <td>Rank</td>
            <td>Player</td>
            <td>Score</td>
        </tr>
    </thead>
    <tfoot>
        <!-- Logged in user details here -->
    </tfoot>
    <tbody>
        <% _.each(players, function(player){ %>
            <tr>
                <td><%= player.rank %></td>
                <td><%= player.username %></td>
                <td><%= player.highScore %></td>
            </tr>           
        <% }); %>                                   
    </tbody>
</table>

一切都很顺利，直到我尝试连接到实际的数据服务层。我不明白为什么这不是JSON数组模板?

您可能希望您的渲染方法看起来更像:

render: function() {
  this.$el.html(this.template({ players: this.collection.toJSON() });
}

你需要通过视图的template()函数传递数据上下文，而不是jQuery的html()函数。此外，您希望使用collection. tojson()将集合转换为JSON，而不是使用collection.models.

传入原始模型数组。

在文档中挖掘了一些之后，我想到了这个:

define([
    'domLib',
    'underscore',
    'backbone',
    'router',
    'collection/leaderboard',
    'text!template/leaderboard.html'
    ],
    function($, _, Backbone, Router, LeaderboardCollection, LeaderboardTemplate) {
        var LeaderboardView = Backbone.View.extend({
            el: '#leaderboard',
            template: _.template(LeaderboardTemplate),
            initialize: function(){
                var self = this;
                self.collection = new LeaderboardCollection();
                self.collection.fetch({
                    success: function(collection, response, options){
                        self.$el.html(self.template({ players: collection.toJSON()}));
                    }
                })              
            }
        });
        return LeaderboardView;
});

正确呈现。由于fetch调用是异步的，我假设在fetch之后调用模板渲染不考虑实际存在的数据。进一步的研究表明，这不是在页面加载时填充视图的方式，而是引导它

相关文章：