我遇到了获取Uncaught TypeError的问题:当我尝试在模板中显示数据时,对象#没有方法'get'这里是不同的主干部分:
模板:
<script type="text/template" id="class-template">
<table class="table striped"></table>
<thead>
<tr>
<th>Picture</th>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<% _.each(users,function(user){ %>
<tr>
<td><%= user.get('picUrl') %></td>
<td><%= user.get('firstName') %></td>
<td><%= user.get('lastLame') %></td>
<td><%= user.get('role') %></td>
<td><%= user.get('email') %></td>
</tr>
<% }); %>
</tbody>
</table>
</script>
数据模型和集合:
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
options.url = 'http://localhost/' +options.url;
});
var Office = Backbone.Model.extend({
defaults: {
street : null,
city : null,
state : null,
country : null,
postal_code : null,
},
initialize: function(){
console.log("==> NEW LOCATION");
// you can add event handlers here...
}
});
var Person = Backbone.Model.extend({
defaults: {
picURL : null,
firstName : null,
lastName : null,
email : null,
role : null,
location : new Office()
},
initialize: function(){
console.log("==> NEW PERSON MODEL");
// you can add event handlers here...
}
});
var Users = Backbone.Collection.extend({
url:'loadData.php?list=16025,28477,28474,25513,16489,58911,04607',
model:Person
});
查看:
var ShowClass = Backbone.View.extend({
el: '.page',
initialize: function() {
_.bindAll(this); //Make all methods in this class have `this` bound to this class
},
template: _.template($('#class-template').html()),
render: function() {
var users = new Users();
console.log('calling fetch');
users.fetch();
users.on("reset", function(users){
console.log('rendering with data:'+users.models[0].get('firstName'));
this.$el.html(this.template({users:users.models}));
console.log('finished');
}, this);
}
});
我能够看到从fetch调用返回的数据,所以我知道我正在获取数据。当我把它发送到模板时,这一切似乎都崩溃了。在此先感谢您的所有帮助!
答案 0 :(得分:1)
不要在脚本模板上执行get(),而应该只传递原始属性,而不是传递整个模型。
我意识到您还必须更改模板,但是以这种方式抽象模板并在模板外部进行循环可以更好地处理错误。这也将使您的代码模块化,更容易调试。
查看:
users.on("reset", function(users){
_.each(users, function (user) {
var data = user.toJSON();
this.$el.html(this.template({
picUrl: data.picUrl,
firstName: data.firstName }));
}, this);
模板只是:
<td><%- picUrl %></td>
<td><%- firstName %></td>
...