Whenever I include alert() in the render function within the UserListView, the output is shown correctly. However, if I remove alert(), the view does not display for some reason.
I'm feeling a bit puzzled by this. Can anyone explain why this is happening?
Below is the code snippet:
var User = Backbone.Model.extend({
defaults: {}
});
var UserCollection = Backbone.Collection.extend({
model: User,
url: 'http://localhost/cirest/index.php/api/userapi/users'
});
var UserView = Backbone.View.extend({
tagName: 'thumbnail',
className: 'span12',
template: $('#userdetailtemplate').html(),
render: function () {
var tmpl = _.template(this.template);
this.$el.html(tmpl(this.model.toJSON()));
return this;
}
});
var UserListView = Backbone.View.extend({
el: ('#content1'),
initialize: function () {
this.collection = new UserCollection();
this.collection.fetch();
this.render();
},
render: function () {
var that = this;
alert('asdf');
_.each(this.collection.models, function (item) {
that.renderUser(item);
}, this);
},
renderUser: function (item) {
var userview = new UserView({
model: item
});
this.$el.append(userview.render().el);
}
});
$(function () {
var uview = new UserListView();
});
HTML Page:
<div id="content1" class="span12"></div>
<script type="text/template" id="userdetailtemplate">
<%= user_name %> <%= user_email %>
</script>