Backbone.js - cómo manejar el "inicio de sesión"?

Question

Hola, estoy intentando abarcar backbone.js durante algunos días, pero dado que este es mi primer Framework MVC, es bastante difícil.

Puedo hacer que mis Colecciones funcionen fácilmente, obteniendo datos del servidor, etc., pero todo depende del primer "inicio de sesión" por clave de API. Simplemente no sé cómo modelar esto con un buen enfoque de MVC. (Por cierto: no puedo utilizar el router/Controlador porque es una extensión de Chrome)

El flujo es el siguiente:

1. inicio Extensión
2. ¿Hay un API-Key en localStorage?
3. No => Muestra un campo de entrada y un botón de guardar que guarda la clave en localStorage; Sí => proceder a la aplicación:
4. App ......

La única manera de que pudiera pensar en ello es poner todo junto en una gran vista ... pero Supongo que dado que soy bastante nuevo en esto, seguramente hay algunos enfoques mejores.

Answer 1

Puede crear un modelo que mantenga el estado del estado de inicio de sesión del usuario y una vista que represente una plantilla diferente según ese estado. La vista puede mostrar la plantilla de "campo de entrada" si el usuario no está conectado y una plantilla diferente si el usuario está. Mantendría todo acceso a localStorage en el Modelo porque la Vista no debería preocuparse por la persistencia. La vista probablemente no debería preocuparse también por la clave API, y es por eso que mi vista se vincula al cambio registrado en el modelo ('change: loggedIn') en lugar de apiKey change ... aunque estoy mostrando la clave API en uno de mis plantillas solo para demostración. Aquí está mi muestra muy simplificada. Tenga en cuenta que no me molesté con la validación de la clave de la API, pero es probable que desee:

plantillas:

<script id="logged_in" type="text/html"> 
    You're logged in. Your API key is <%= escape('apiKey') %>. Let's proceed with the application... 
</script> 
<script id="not_logged_in" type="text/html"> 
    <form class="api_key"> 
     API Key: <input name="api_key" type="text" value="" /> 
     <button type="sumit">Submit</button> 
    </form> 
</script> 

Modelo Backbone y Vista:

var LoginStatus = Backbone.Model.extend({ 

    defaults: { 
     loggedIn: false, 
     apiKey: null 
    }, 

    initialize: function() { 
     this.bind('change:apiKey', this.onApiKeyChange, this); 
     this.set({'apiKey': localStorage.getItem('apiKey')}); 
    }, 

    onApiKeyChange: function (status, apiKey) { 
     this.set({'loggedIn': !!apiKey}); 
    }, 

    setApiKey: function(apiKey) { 
     localStorage.setItem('apiKey', apiKey) 
     this.set({'apiKey': apiKey}); 
    } 

}); 

var AppView = Backbone.View.extend({ 

    _loggedInTemplate: _.template($('#logged_in').html()), 
    _notLoggedInTemplate: _.template($('#not_logged_in').html()), 

    initialize: function() { 
     this.model.bind('change:loggedIn', this.render, this); 
    }, 

    events: { 
     'submit .api_key': 'onApiKeySubmit' 
    }, 

    onApiKeySubmit: function(e){ 
     e.preventDefault(); 
     this.model.setApiKey(this.$('input[name=api_key]').val()); 
    }, 

    render: function() { 
     if (this.model.get('loggedIn')) { 
      $(this.el).empty().html(this._loggedInTemplate(this.model)); 
     } else { 
      $(this.el).empty().html(this._notLoggedInTemplate(this.model)); 
     } 
     return this; 
    } 
}); 

var view = new AppView({model: new LoginStatus()}); 
$('body').append(view.render().el);