view not displaying correctly

Question

When I use alert() in render function inside UserListView the output is displayed correctly. If I comment alert(), the view is not displayed.

I'm stuck on this. Why is that?

Here is the code :

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>

Something like this http://stackoverflow.com/questions/8413500/backbone-js-populating-a-collection/8415515#8415515 ? — nikoshr, Mar 28 '13 at 11:40

score 0 · Answer 1 · answered Apr 08 '13 at 13:41

I got working by changing the initialize function in UserListView as

initialize: function() {
        this.collection = new UserCollection();
        this.collection.fetch();
        this.collection.on("reset", this.render, this);
        this.render();
    },

thanks for @nikoshr also to referring that link

view not displaying correctly

1 Answers1