Strange Issue: Backbone model showing different value in one of the method

Question

I am showing a Bootstrap Modal Dialog (UserPermission) on click of a Button, where in I am showing the jqxTreeGrid displaying the list of users. Each user has some permission settings.

So I have the following resources to setup the Bootstrap Modal Dialog:

1. I have a Backbone model named UserPermissionModel.js

   define(['app', 'underscore', 'backbone'],

   function(app, _, Backbone)
   {
       "use strict";
   
       var UserPermissionModel = Backbone.Model.extend({
   
           defaults: {  
   
               userList:[],
               permissions:[]
           }
   
       });
   
       return UserPermissionModel;
   

   });

2. I have a View UserPermissionView, with the following methods

   initialize: function () {    
      var self = this;    
      self.model = new UserPermissionModel();                                 
   }
   

   On After render, I am calling a webservice that is giving me the List of users, which I am saving in the userList Array within the Model. Since this is the first time I am setting the permissions, I set the Permission array to the default values.

   afterRender: function () { var self = this;

   self.model.set("userList", []);
   self.model.set("permissions", []);
   
   // Get all the users save them in model    
   AllUsers.fetch(function (Users) {
        Users.each(function (user) {
   
           // create the permission object reference
           var permission = new PermissionInfo();
   
           // set defaults
           permission.createJSON({
               userId: user.attributes.id,               
               read: "",
               write: ""
           });
           // Save the group in model
           self.model.get("userList").push(user);
           // Save the permission in model
           self.model.get("permissions").push(permission);
       });
   
       // Show the groups in jqxTreeGrid
       self.loadListGrid();
   }, function (error) {
       // error handling
   });
   

   },

Once I get the userList I show them on the jqxTreeGrid using the method loadListGrid.

Inside the jqxTreeGrid ready method, i am initializing the popover. Below is the jqxTreeGrid code which I have put in loadListGrid method of Backbone view

 $("#jqxListGrid").jqxTreeGrid({
                width: '100%',
                source: dataAdapter,
                theme: 'iltreegrid',
                columnsHeight: 35,                    
                ready: function() {

                    // initialize the Permission Setting Popover
                    var popOverSettings = {
                        placement: 'bottom',
                        container: 'body',
                        html: true,
                        selector: '[rel="popover"]',
                        content: $('#ad_permissionSettingPopover').html()
                    }

                    // bind the popover on body
                    $("body").popover(popOverSettings).parent().delegate('button.btn_permission_ok', 'click', function () {

                        //that.setDocumentPermissions();
                        app.pubSub.trigger("permissionPopover:onOk");
                        $("[rel=popover]").popover("destroy");
                        $(".popover").remove();

                    }).on("show.bs.popover", function (e) {

                        // hide all other popovers before showing the current popover
                        $("[rel=popover]").not(e.target).popover("destroy");
                        $(".popover").remove();

                    }).on("shown.bs.popover", function (e) {

                        // set the z-index of the popover as it is going behid the jqxTreeGrid Column
                        $('.popover').css('z-index', '999999');

                        // add the style class
                        $('.popover').addClass('jqxtreegridCell-popover');

                        // get the current value of permission settings and 
                        // mark the radio button checked

                         app.pubSub.trigger("permissionPopover:onShow");

                    });

                    // click on cancel button removes the popover
                    $("body").popover(popOverSettings).parent().delegate('div.btn_permission_cancel', 'click', function () {

                        $("[rel=popover]").popover("destroy");
                        $(".popover").remove();

                    });
                },
                columns: [
                    {
                        text: '<span class="ilicon ilicon-user"></span>' + app.i18n.t("doc_permission_userName", " User Name"),
                        datafield: 'userName',
                        cellsrenderer: userIconRenderer,
                        width:'40%'
                    },
                    {
                        text: '',
                        datafield: 'id',
                        width: '0%',
                        hidden: true
                    },
                    {
                        text: '<span>' + app.i18n.t("doc_permission_userType", "User Type") + '</span>',
                        datafield: 'userType',
                        width: '18%'
                    },
                    {
                        text: '<span>' + app.i18n.t("doc_permission_email", "Email") + '</span>',
                        datafield: 'userEmail',
                        width: '18%'
                    },
                    {
                        text: '<span>' + app.i18n.t("doc_permission_permissionSetting", "Permission Setting") + '</span>',
                        width: '24%',
                        cellsrenderer: permissionSettingRenderer,
                        sortable: false
                    }
                    ]
            });

Each User in the grid has a button which shows a popover with some radio buttons. The default permission is checked for that user (which I read from the permission array stored in model). I can select a different permission for this user and I update the Permission Array in the model for that particular user.

Hope I was able to explain the functionality.

Now, When i open the modal first time. Everything works perfect. But When i close the modal and open it again, this is where the problem happens. When i read the permissins inside "shown.bs.popover" method, the Backbone Model has values in Permission array that I never set. Its giving me wrong values. But in any other mothod it has the correct value

I tried my best to replicate the scenario here. If anyone has any idea please comment.

Thanks Yameen