I am running into an issue. My CommentinfoModel is fetching data from the server and I am able to show all the data in a view. I used another PostwallModel to post the data in same view.

When I am posting the data, I get a response from the server, but that data does not appear in template. When I go to another page and I e back, the new posted data is appears. How can I refresh after my post action in done. Here is my code:

var myPostwallView = Backbone.View.extend({
    el: $("#content"),
    events: {
        'click #postinwall': 'postmessage',

    },
    initialize: function () {
        var that = this;

        var options = {
            query: uni_id + "/chaid/" + currentChallenge['id']
        }

        var onDataHandler = function (collection) {
            that.render();
        }

        var onErrorHandler = function (collection) {
            var errorstring = JSON.stringify(collection);
            console.log(errorstring);
        }

        this.model = new CommentinfoModel(options);
        this.model.fetch({
            success: onDataHandler,
            error: onErrorHandler,
            dataType: "json"
        });
    },

    render: function () {
        $('.nav li').removeClass('active');
        $('.nav li a[href="' + window.location.hash + '"]').parent().addClass('active');

        var data = {
            cinfo: this.model.toJSON(),
            _: _
        };

        var piledTemplate = _.template(PostwallTemplate, {
            data: data
        });
        this.$el.html(piledTemplate);
    },

    // Posting message action
    postmessage: function (e) {
        var optionsp = {
            query: uni_id + "/chaid/" + currentChallenge['id']
        }

        var postmsg = $('#txt').val();
        var obj = new PostwallModel(optionsp);
        obj.save({
            uid: uni_id,
            chaid: currentChallenge['id'],
            post: postmsg
        }, {
            success: function (obj, response) {
                console.log(response.responseText, console.log(response);
                alert(response.message));
            }
        });

        e.preventDefault();
        $('#txt').val("");
    }
});

return myPostwallView;

I am running into an issue. My CommentinfoModel is fetching data from the server and I am able to show all the data in a view. I used another PostwallModel to post the data in same view.

When I am posting the data, I get a response from the server, but that data does not appear in template. When I go to another page and I e back, the new posted data is appears. How can I refresh after my post action in done. Here is my code:

var myPostwallView = Backbone.View.extend({
    el: $("#content"),
    events: {
        'click #postinwall': 'postmessage',

    },
    initialize: function () {
        var that = this;

        var options = {
            query: uni_id + "/chaid/" + currentChallenge['id']
        }

        var onDataHandler = function (collection) {
            that.render();
        }

        var onErrorHandler = function (collection) {
            var errorstring = JSON.stringify(collection);
            console.log(errorstring);
        }

        this.model = new CommentinfoModel(options);
        this.model.fetch({
            success: onDataHandler,
            error: onErrorHandler,
            dataType: "json"
        });
    },

    render: function () {
        $('.nav li').removeClass('active');
        $('.nav li a[href="' + window.location.hash + '"]').parent().addClass('active');

        var data = {
            cinfo: this.model.toJSON(),
            _: _
        };

        var piledTemplate = _.template(PostwallTemplate, {
            data: data
        });
        this.$el.html(piledTemplate);
    },

    // Posting message action
    postmessage: function (e) {
        var optionsp = {
            query: uni_id + "/chaid/" + currentChallenge['id']
        }

        var postmsg = $('#txt').val();
        var obj = new PostwallModel(optionsp);
        obj.save({
            uid: uni_id,
            chaid: currentChallenge['id'],
            post: postmsg
        }, {
            success: function (obj, response) {
                console.log(response.responseText, console.log(response);
                alert(response.message));
            }
        });

        e.preventDefault();
        $('#txt').val("");
    }
});

return myPostwallView;

• javascript
• jquery
• backbone.js
• backbone-views

• 2 mind reformatting your code so it's readable? – Stephen Thomas Commented Apr 16, 2014 at 10:03

2 Answers 2

When a backbone operation such as a GET or POST is pleted, the model will fire a sync event that you can listen to on the view and call your render function. That code looks something like this and can be placed in your view initialization method:

this.listenTo(this.model, 'sync', this.render);

// Posting message action
    postmessage: function (e) {
        var optionsp = {
            query: uni_id + "/chaid/" + currentChallenge['id']
        }

        var postmsg = $('#txt').val();
        var obj = new PostwallModel(optionsp);
        obj.save({
            uid: uni_id,
            chaid: currentChallenge['id'],
            post: postmsg
        }, {
            success: function (obj, response) {
                console.log(response.responseText, console.log(response);
                alert(response.message),that.initialize());  
            }
        });

        e.preventDefault();
        $('#txt').val("");
    }