How to refresh a view/template in Backbone.js

11,117

Solution 1

// 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("");
    }

Solution 2

When a backbone operation such as a GET or POST is completed, 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);
Share:
11,117
Sport
Author by

Sport

I'm a Full-Stack developer working on iOS ,android iPhone ,iPad and game applications.Practice and the love for programming is what defines me.Love to learn new technologies,keen about entrepreneurship and startups.

Updated on June 04, 2022

Comments

  • Sport
    Sport almost 2 years

    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 come 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 compiledTemplate = _.template(PostwallTemplate, {
                data: data
            });
            this.$el.html(compiledTemplate);
        },
    
        // 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;
    
  • Sport
    Sport almost 10 years
    i am not getting your point. can you check my code and tell me where i need to change and what i need to add in code . @Griffin
  • Griffin M
    Griffin M almost 10 years
    I think you just need to add the above line into your view's 'initialize' function below the 'var that = this' line for instance.
  • Sport
    Sport almost 10 years
    var that = this ; already i have added in my code look at my initialize fun.
  • Griffin M
    Griffin M almost 10 years
    no I meant to place this line: this.listenTo(this.model, 'sync', this.render); after that var that=this; line