主干和下划线 - 模板化一个简单的视图答案

【问题标题】：Backbone and underscore - templating a simple view主干和下划线 - 模板化一个简单的视图
【发布时间】：2013-04-14 13:48:07
【问题描述】：

我在 Backbone 和下划线中的第一个模板化视图不太幸运。

我从 Underscore 库中收到“未定义玩家错误”。

这是我的模特：

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 数组的模板？

【问题讨论】：

this.$el.html(this.template, {players: this.collection.models}); 是错字吗？因为在我看来你没有在这里评估模板。
好吧，所以我改变了我的看法： var compiledTemplate = _.template(LeaderboardTemplate, {players: this.collection.models}); this.$el.html(compiledTemplate);
但它似乎没有遍历数组？
你试过吗？如果这不起作用，我使用this 简单的技巧来调试下划线模板。（它适用于任何具有脚本调试器的浏览器）

标签： javascript templates dom backbone.js underscore.js

【解决方案1】：

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

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

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

【讨论】：

这将返回与先前关于预编译模板的评论相同的结果，因此朝着正确的方向迈出了一步，但仍然没有获得任何数据，只是表头。
如果我记录 this.collection.toJSON() 数组中没有子对象？
也许可以看看浏览器开发工具中的网络请求，看看在获取集合时来自服务器的数据是什么样子的。

【解决方案2】：

在对文档进行了一些挖掘之后，我想出了这个：

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 之后调用模板渲染并不能说明实际存在的数据。进一步的研究表明，这不是在页面加载时填充视图的方法，而是引导它

【讨论】：