Javascript 主干线和下划线-模板化简单视图
我在主干和下划线中的第一个模板化视图中运气不太好 我从下划线库中得到一个“玩家未定义错误” 这是我的模型:Javascript 主干线和下划线-模板化简单视图,javascript,templates,dom,backbone.js,underscore.js,Javascript,Templates,Dom,Backbone.js,Underscore.js,我在主干和下划线中的第一个模板化视图中运气不太好 我从下划线库中得到一个“玩家未定义错误” 这是我的模型: define([ 'domLib', 'underscore', 'backbone', 'router' ], function($, _, Backbone, Router) { var PlayerModel = Backbone.Model.extend({ defaults: {
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之后调用模板呈现不会考虑实际存在的数据。进一步的研究表明,这不是在页面加载时填充视图的方法,而是引导它
this.$el.html(this.template,{players:this.collection.models})代码>是打字错误吗?因为在我看来,您没有在这里评估模板。好的,所以我将我的视图更改为:var compiledTemplate=uu.template(排行榜模板,{players:this.collection.models});这是.el.html(compiledTemplate);但它似乎没有在数组上迭代?您尝试过吗?如果这不起作用,我将使用简单的技巧调试下划线模板。(并且它将与任何具有脚本调试器的浏览器一起工作)这将返回与先前关于预编译模板的注释相同的结果,因此这是一个正确的步骤,但仍然没有得到任何数据,只是表头。如果我记录了这个。collection.toJSON()阵列中没有子对象?请查看浏览器开发工具中的网络请求,以查看获取集合时来自服务器的数据的外观。