Question

I have a backbone view that is initialized via route, but i when i navigate to another route and return to the previous one again via link, the events in the view get fired twice
Heres my router

define(['underscore','backbone','views/projects/view_project',
    'views/projects/project_tasks','views/projects/project_milestones',
    'views/projects/project_tasklists','views/projects/project_documents'
    ],
    function( _,Backbone,ProjectTasks,ProjectMilestones,
        ProjectTasklists,ProjectDocuments) {

    var ProjectRouter = Backbone.Router.extend({
        initialize: function(projects) {
            if(projects) {
                this.projects = projects;
            }
        },
        //url routes mapped to methods
        routes: {
            "project/:id":"get_project",
            "project/:id/milestones":"get_project_milestones",
            "project/:id/tasks":"get_project_tasks",
            "project/:id/tasklists":"get_project_tasklists",
            "project/:id/documents":"get_project_documents"
        },

        get_project: function(id) {
            UberERP.UI.loadpage("#project-view");
            var project_view = new ProjectView(this.projects,id);
        },

        get_project_tasks: function(id) {
            UberERP.UI.loadpage("#project-tasks-view");
            var project_tasks_view = new ProjectTasks(id,this.projects);
        },

        get_project_tasklists: function(id) {
            UberERP.UI.loadpage("#project-tasklist-view");
            var project_tasks_view = new ProjectTasklists(id,this.projects);
        },

        get_project_milestones: function(id) {
            UberERP.UI.loadpage("#project-milestones-view");
            var project_milestones_view = new ProjectMilestones(id,this.projects);
        },

        get_project_documents: function(id) {
            UberERP.UI.loadpage("#project-documents-view");
            var project_documents_view = new ProjectDocuments(id,this.projects);
        }
    });

    return ProjectRouter;
});

and a snipper from the view

events: {
          "click input[name=task]":"select_task",
          "click a.remove-icon":"remove_task",
          "click td.view-task":"view_task",
          "click #project-tasks-table .sort-by-status":"sort_by_status",
          "click #project-tasks-table .group-filter-btn":"sort_by_task_list"
        },

select_task: function( event ) {
            var el = $(event.currentTarget);
            row = el.parent('td').parent('tr');
            console.log(el.val());
            if(row.hasClass('active')) {
                row.removeClass('active');
            }
            else {
                row.addClass('active');
            }
        }

I have a line in the select_task method that logs the value of the clicked input element.
When the view is initially called it works properly and logs to the console. But after navigating to another route and returning back, the value of the input element is logged twice when clicked. What could be wrong?

Answer 1

I think you just find your self in the middle of a Backbone ghost View issue.

Try to remove and unbind all your Views when you are moving from one route to another.