Backbone.js - comment gérer "login"?

Question

Salut, J'essaie de m'en tenir à backbone.js depuis quelques jours maintenant, mais comme c'est mon premier Framework MVC, c'est plutôt difficile.

Je peux facilement faire fonctionner mes collections, récupérer des données à partir du serveur, etc., mais tout dépend de la première «connexion» par clé API. Je ne sais pas comment modéliser cela avec une bonne approche MVC. (BTW: Je ne peux pas utiliser le routeur/contrôleur car il est une extension Chrome)

Le flux ressemble à ceci:

1. Début Extension
2. Y at-il une API-Key dans localStorage?
3. Non => Afficher un champ de saisie et un bouton de sauvegarde qui sauvegarde la clé dans localStorage; Oui => procéder à l'application:
4. App ......

La seule façon que je pouvais penser qu'il est mettre tous ensemble dans une grande ... Voir mais je suppose que je suis assez nouveau à ce sujet, il y a sûrement de meilleures approches.

Answer 1

Vous pouvez créer un modèle qui conserve l'état de connexion de l'utilisateur et une vue qui rend un modèle différent en fonction de cet état. La vue peut afficher le modèle "champ de saisie" si l'utilisateur n'est pas connecté et un modèle différent si l'utilisateur l'est. Je conserverais tout accès à localStorage dans le modèle car la vue ne devrait pas être concernée par la persistance. La vue ne devrait probablement pas non plus être concernée par la clé API, et c'est pourquoi j'ai ma vue liée à la modification de la fonction logIn du modèle ('change: loggedIn') au lieu de la modification apiKey ... bien que je montre la clé API dans un de mes modèles à des fins de démonstration seulement. Voici mon exemple très simplifié. Notez que je ne l'ai pas pris la peine de valider la clé API, mais vous aurez probablement envie:

Modèles:

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

Modèle Backbone et Vue:

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