Repeated events in view backbone

Question

Switch views and return to another. events are doubling n times according to the call of the view.

Router:

define(function (require) {
    "use strict";
    var $ = require('jquery'),
        Backbone = require('backbone'),
        _ = require('underscore'),
        LoginView = require('../views/login'),
        RecoveryPasswordView = require('../views/recoverypassword');
    return Backbone.Router.extend({
        routes: {
            '': 'onViewLogin',
            'recoverypassword': 'onViewRecoveryPassword'
        },
        onViewLogin: function () {
            new LoginView();
        },
        onViewRecoveryPassword: function () {
            new RecoveryPasswordView();
        }
    });
});

First View:

define(function (require) {
    "use stritc";
    var $ = require('jquery'),
        _ = require('underscore'),
        Handlebars = require('handlebars'),
        Backbone = require('backbone'),
        template = Handlebars.compile($('#login-template').html()),
        HomeView = require('../views/home'),
        Util = require('util');
    return Backbone.View.extend({
        el: '#app',
        events: {
            'click #button-login': 'onLogin'
        },
        ui: function () {
            return {
                email: this.$('input[name="email"]'),
                password: this.$('input[name="password"]')
            }
        },
        initialize: function () {
            this.render();
        },
        render: function () {
            this.$el.html(template());
            return this;
        },
        onLogin: function (event) {
            if (_.isEmpty(this.ui().email.val())) {
                navigator.notification.alert('El Correo electronico es requerido.', null, 'Notificación', 'Aceptar');
                return false;
            }
            if (_.isEmpty(this.ui().password.val())) {
                navigator.notification.alert('La contraseña es requerido', null, 'Notificación', 'Aceptar');
                return false;
            }
            if (!Util.regExpEmail().test(this.ui().email.val())) {
                navigator.notification.alert('El Correo Incorrecto.', null, 'Notificación', 'Aceptar');
                return false;
            }
            $.getJSON(Util.baseUrl() + 'auth/' + this.ui().email.val() + '/' + this.ui().password.val(), {}, function (response) {
                if (response.status == 'success') {
                    localStorage.user = JSON.stringify({
                        'id': response.data.intIdUser,
                        'name': response.data.strUsername,
                        'email': response.data.strEmail,
                        'specialty': response.data.intIdSpecialty
                    });
                    new HomeView();
                } else {
                    navigator.notification.alert(response.message, null, 'Notificación', 'Aceptar');
                    return false;
                }
            });
        }
    });
});

Secondo View:

define(function (require) {
    "use stritc";
    var $ = require('jquery'),
        Handlebars = require('handlebars'),
        Backbone = require('backbone'),
        template = Handlebars.compile($('#recoverypassword-template').html()),
        LoginView = require('../views/login'),
        Util = require('util');
    return Backbone.View.extend({
        el: '#app',
        events: {
            'click #button-recoverypassword': 'onValidate'
        },
        ui: function () {
            return {
                email: this.$("input[type='email']")
            };
        },
        initialize: function () {
            this.render();
        },
        render: function () {
            this.$el.html(template());
            return this;
        },
        onValidate: function () {
            if (_.isEmpty(this.ui().email.val())) {
                navigator.notification.alert('El Correo electronico es requerido.', null, 'Notificación', 'Aceptar');
                return false;
            }
            if (!Util.regExpEmail().test(this.ui().email.val())) {
                navigator.notification.alert('El Correo Incorrecto.', null, 'Notificación', 'Aceptar');
                return false;
            }
            $.getJSON(Util.baseUrl() + 'recoverypassword/' + this.ui().email.val(), {}, function (response) {
                if (response.status == 'success') {
                    navigator.notification.alert(response.message, null, 'Notificación', 'Aceptar');
                    new LoginView();
                } else {
                    navigator.notification.alert(response.message, null, 'Notificación', 'Aceptar');
                    return false;
                }
            });
        }
    });
});

Template:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-title" content="DentalProsthetic">
        <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="public/css/ratchet.css">
        <link rel="stylesheet" type="text/css" href="public/css/snap.css">
        <script src="cordova.js"></script>
        <script src="vendor/ratchet.js"></script>
        <script data-main="application/config/app" src="vendor/require.js"></script>
    </head>

    <body id="app">
        <!-- The Templates Login -->
        <script type="text/x-handlebars-template" id="login-template">
            < div class = "background-blue" > < div class = "content background-blue" > < figure class = "logo" > < img src = "public/images/logo.png" > < /figure> <div class="line-inputs"> <input type="email" name="email" placeholder="Email" required> </div > < div class = "line-inputs" > < input type = "password"
            name = "password"
            placeholder = "Contraseña"
            required > < /div> <button class="button-main button-block" id="button-login" data-ignore="push">Iniciar</button > < span class = "text-row" > < a href = "#recoverypassword"
            data - ignore = "push" > ¿Olvidaste tu contraseña ? < /a> </span > < span class = "text-row" > ¿Aún no eres usuario ? < a href = "#register"
            data - ignore = "push" > Regístrate aquí < /a> </span > < /div> </div >
        </script>
        <!-- End Templates Login -->
        <!-- The Templates Recovery Password -->
        <script type="text/x-handlebars-template" id="recoverypassword-template">
            < header class = "bar-title" > < a class = "button back"
            href = "#"
            data - ignore = "push" > Atras < /a> <h1 class="title">Regístrate</h1 > < /header> <div class="content"> <div class="line-inputs"> <input type="email" name="email" placeholder="Email"> </div > < button class = "button-main button-block"
            id = "button-recoverypassword" > Restablecer contraseña < /button> </div >
        </script>
        <!-- End Templates Recovery Password -->
    </body>

</html>

---

Is there a problem to exchange views, or create a new one. Since views persistence remain as view and events in the context of application :

Answer 1

I won't read your whole code (i'm lazy and as BlackSheep said you should post only relevant code), but if your events are doubling it means you have a ghost view (or a ghost listener in a ghost view). In Backbone you have to remove manually a view before calling it again.

I propose you some articles that will guide you to solve your problem :

• http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/ (the part Cleaning Up: Avoiding Memory Leaks and Ghost Views but the whole article is interesting)
• http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/