Question

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

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

Flow看起来像这样：

开始扩展程序
localStorage中是否有 API-Key ？
否 =＆gt;显示输入字段和保存按钮，将键保存到localStorage; 是 =＆gt;继续申请：
应用 ......

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

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>

Backbone模型和视图：

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

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

1 个答案: