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

Question

嗨，我现在试图将我的脑袋包围在backbone.js上几天，但由于这是我的第一个MVC框架，所以很难。

我可以轻松地让我的Collections工作，从服务器等获取数据，但这一切都取决于每个API-Key的第一次“登录”。 我只是不知道如何使用良好的MVC方法对此进行建模。 （顺便说一句：我不能使用路由器/控制器，因为它是Chrome扩展）

Flow看起来像这样：

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

我能想到的唯一方法就是将它们放在一个大视图中...但我想，因为我对此很新，所以肯定有一些更好的方法。

Answer 1

您可以创建一个维护用户登录状态的模型，以及一个根据该状态呈现不同模板的视图。 如果用户未登录，则视图可以显示“输入字段”模板，如果是用户，则视图可以显示不同的模板。 我会在模型中保留对localStorage的所有访问权限，因为View不应该关注持久性。 视图应该也不应该关注API Key，这就是为什么我的视图绑定到模型的loggedIn更改（'change：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);