Backbone.js - "लॉगिन" को कैसे संभालें?

Question

हाय मैं कुछ दिनों के लिए backbone.js के आस-पास अपने सिर को लपेटने की कोशिश कर रहा हूं लेकिन चूंकि यह मेरा पहला एमवीसी फ्रेमवर्क है, यह बहुत कठिन है।

मैं आसानी से काम करने के लिए अपने संग्रह प्राप्त कर सकता हूं, सर्वर से डेटा प्राप्त कर सकता हूं, लेकिन यह सब प्रति एपीआई-कुंजी में पहले "लॉगिंग" पर निर्भर करता है। मुझे नहीं पता कि यह एक अच्छा एमवीसी दृष्टिकोण के साथ कैसे मॉडल करें। (Btw: मैं रूटर/नियंत्रक, क्योंकि यह एक Chrome एक्सटेंशन का उपयोग नहीं कर सकते हैं)

प्रवाह इस तरह दिखता है:

1. प्रारंभ एक्सटेंशन
2. वहाँ एक एपीआई-कुंजी है स्थानीय स्टोरेज में?
3. नहीं => एक इनपुट फ़ील्ड और एक सहेजें बटन प्रदर्शित करें जो स्थानीय स्टोरेज की कुंजी बचाता है; हाँ => आवेदन के साथ आगे बढ़ना:
4. अनुप्रयोग ......

एक ही रास्ता मैं इसके बारे में सोच सकता है सब कुछ एक साथ डाल रहा है एक बड़ा दृश्य में ... लेकिन मैं अनुमान है क्योंकि मैं इसके लिए बिल्कुल नया हूं, निश्चित रूप से कुछ बेहतर दृष्टिकोण हैं।

Answer 1

आप एक मॉडल बना सकते हैं जो उपयोगकर्ता की लॉगिन स्थिति की स्थिति को बनाए रखता है और एक दृश्य जो उस स्थिति के आधार पर एक अलग टेम्पलेट प्रस्तुत करता है। यदि उपयोगकर्ता लॉग इन नहीं है और उपयोगकर्ता अलग है तो दृश्य "इनपुट फ़ील्ड" टेम्पलेट दिखा सकता है। मैं मॉडल में स्थानीय स्टोरेज तक पहुंच रखूंगा क्योंकि दृश्य दृढ़ता से चिंतित नहीं होना चाहिए। दृश्य शायद एपीआई कुंजी से भी चिंतित नहीं होना चाहिए, और यही कारण है कि मेरे पास एपीआई बदलाव के बजाय मॉडल के लॉग इन चेंज ('चेंज: लॉग इन') पर बाध्यकारी है ... हालांकि मैं एक में एपीआई कुंजी दिखा रहा हूं केवल प्रदर्शन उद्देश्य के लिए मेरे टेम्पलेट्स का। यहां मेरा बहुत सरल नमूना है। ध्यान दें कि मैं API कुंजी के सत्यापन में परेशान नहीं किया था, लेकिन आप शायद चाहता हूँ:

टेम्पलेट:

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

रीढ़ मॉडल और दृश्य:

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