Backbone.js - Solving method

Question

BACKBONE and Jquery

I have a piece of code:

    var ChatMessage = Backbone.View.extend({
    el : '#friend-list',
    events : {},
    initialize : function() {},
    loadMessage  : function(parent_id) {
        //ukrycie komunikatów etc.
        $("#chat_body").html('');
        $("#end-record-info").hide();
        $("#end-record-load").hide();
        page = 1;
        this.ajax(parent_id,page); //initial data load
    },

    ajax : function(parent_id,page) {
        $.getJSON( "/**/**/"+parent_id+"/"+page, function( json ) {
            $("#end-record-load").hide();
            this.build(json.message, page);
            page ++; //page increment
            loading = false;  //set loading flag off
            end_record = false;
            if(json.max < page){ //no more records
                end_record = true; //set end record flag on
                return; //exit
            }
        });
    },

    build : function(arr, page) {
        alert('dgd');
        html = '';
        var height = 0;
        arr.reverse();
        $.each(arr, function(i, data){
            html += '<div class="answer '+data.side+'">';
            html += '<div class="avatar">';
            html += '<a href="**" target="_blank">';
            html += ''+data.id+'';
            html += '</a>';
            html += '<div class="status offline"></div>';
            html += '</div>';
            html += '<div class="name">';
            html += '<a href="**" target="_blank">';
            html += data.username;
            html += '</a>';
            html += '</div>';
            html += '<div class="text">';
            html += data.content;
            html += '</div>';
            html += '<div class="time">';

            if (data.side != 'left') {
                html += data.dateSendMessage
            }
            else {
                if (data.read == 0) {
                    html += 'xxx';
                }
                else {
                    html += 'xxx';
                }
            }
            html += '</div>';
            html += '</div>';
        });

        var nh = $('#chat_body').html();
        $('#chat_body').html(html+nh);

        if (page == 1) {
            $('#chat_body .answer').each(function(i, value){
                height += parseInt($(this).height());
            });

            height += '';
            $('.chat2').scrollTop(height);
        }
    }
});

In AJAX method I want to build method

  this.build(json.message, page);

But something does not work and I get an error.

pm2.js:67TypeError: this.build is not a function. (In 'this.build(json.message, page)', 'this.build' is undefined)

Can anyone help? What changes in this piece of code can be by the way?

Piotr

score 1 · Accepted Answer · answered Aug 18 '17 at 06:57

1

You should probably save current context before calling getJSON:

 ajax : function(parent_id,page) {
    var self = this;
    $.getJSON( "/**/**/"+parent_id+"/"+page, function( json ) {
        ...
        self.build(json.message, page);

answered Aug 18 '17 at 06:57

paulitto

4,585
2
22
28

1

This is bad. You should use `context` option of jQuery ajax. Or since it's 2017 - you can use `bind` or an arrow function depending on the context – T J Aug 23 '17 at 11:07
Of course there are plenty of other ways, but why this is `bad`? and.. even though it's 2017 that doesn't mean everyone uses modern web browsers, and arrow functions not supported everywhere. `bind` was around long ago, but for me it makes things a bit more confusing – paulitto Aug 24 '17 at 01:16

Backbone.js - Solving method

1 Answers1