0

切換視圖並返回到另一個視圖。根據觀點的呼籲,事件翻倍n次。查看中樞的重複事件

路由器:

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(); 
     } 
    }); 
}); 

首先查看:

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查看:

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; 
       } 
      }); 
     } 
    }); 
}); 

模板:

<!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> 

交換視圖或創建新視圖是否存在問題? 意見以來持續保持查看和事件在應用程序上下文:

VIEWS

+0

請只發布相關的代碼,並更具體。 – undefined

回答

1

我不會看你的整個代碼(我懶惰和害羣之馬說你應該張貼只有相關的代碼),但如果你的事件增加一倍,這意味着你有一個鬼視圖(或鬼視圖中的鬼聽衆)。在Backbone中,您必須在再次調用之前手動刪除視圖。

我建議你一些文章,將指導你解決你的問題: