Backbone.js - 如何处理“登录”？

Question

嗨我想在我的脑海中围绕backbone.js好几天了，但因为这是我第一个MVC框架，所以很难。

我可以很容易地让我的集合工作，从服务器等获取数据，但这一切都取决于每个API密钥的第一个“日志记录”。我只是不知道如何用一个好的MVC方法来建模。 （顺便说一句：我不能使用路由器/控制器，因为它是一个Chrome扩展）

流程是这样的：

1. 开始扩展
2. 是否有API密钥在localStorage？
3. 否 =>显示一个输入字段和一个保存按钮，将密钥保存到localStorage; 是 =>继续申请：
4. 应用 ......

我能想起来的唯一办法就是把他们放在一起在一个大的视图...但我猜测，因为我对此相当新，肯定有一些更好的方法。

Answer 1

您可以创建一个模型来维护用户登录状态的状态以及根据该状态呈现不同模板的视图。该视图可以显示“输入字段”模板，如果用户未登录，则显示不同的模板。我将在模型中保留对localStorage的所有访问权限，因为View不应该关注持久性。该视图可能不应该用的API密钥被关注为好，这就是为什么我有我的观点结合到模型的的loggedIn变化（“改变：的loggedIn”），而不是apiKey变化......虽然我显示在一个API密钥我的模板仅用于演示目的。这是我非常简单的示例。请注意，我没有验证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);