Problem with variable scope in nested Backbone views

91 Views Asked by At

I have a parent view which contains a Backgrid view. In the parent view's initialize section I define a variable isWellSelected. The variable is toggled in the Backgrid column logic when a tickbox is checked. I am able to watch the variable toggled when a box is ticked and unticked.

However, once an event fires the variable is no longer in scope for the event to see. I suspect I may need to pass the variable to the Backrgrid view but I am unsure how to do that correctly. Please advise.

app.wellCollectionView = Backbone.View.extend({
    template: _.template($('#wellTemplate').html()),
    initialize: function() {
        this.isWellSelected = false;

        // isWellSelected toggled to true when a tickbox is checked in the columns block.
        var columns = [...];

        // instantiate collection
        var wellCollection = new app.wellCollection;

        // Set up a grid view to use the pageable collection
        var wellGrid = new Backgrid.Grid({
            columns: columns,
            collection: wellCollection
        });

        // Initialize the paginator
        var paginator = new Backgrid.Extension.Paginator({
            collection: wellCollection
        });

        // Render the template
        this.$el.html(this.template());

        // Render the grid
        this.$el.append(wellGrid.render().el);
        this.$el.append(paginator.render().$el);

        wellCollection.fetch({reset: true}).then(function () {...});
    },

    events: {
        'click #EvaluateWell': function(){
            this.evalWell(event, this.isWellSelected);
            console.log("In events - isWellSelected: " + this.isWellSelected);}
    },

    // More stuff
}

Constructive feedback welcome.

Thanks!

Adding a snippet for "columns" as per JT's request:

var columns = [
{
    name: '',
    label: 'Select',
    cell: Backgrid.BooleanCell.extend({
        events : {
            'change': function(ev){
                var $checkbox = $(ev.target);
                var $checkboxes = $('.backgrid input[type=checkbox]');

                if($checkbox.is(':checked')) {
                    $checkboxes.attr("disabled", true);
                    this.isWellSelected = true;

                    // Disable all checkboxes but this one
                    $checkbox.removeAttr("disabled");
                } else {
                    // Enable all checkboxes again
                    $checkboxes.removeAttr("disabled");
                    this.isWellSelected = false;
                }
            }
        }
    })
}, {
    name: "api",
    label: "API",
    editable: false, // Display only!
    cell: "string"
}, {
    name: "company",
    label: "Operator",
    editable: false, // Display only!
    cell: "string"
}];
0

There are 0 best solutions below