Backbone.js - как обращаться с "логином"?

Привет, я пытаюсь обернуть голову вокруг backbone.js уже несколько дней, но поскольку это моя первая MVC Framework, это довольно сложно.

Я могу легко заставить мои коллекции работать, получать данные с сервера и т.д., но все зависит от первого "ведения журнала" в каждом API-Key. Я просто не знаю, как смоделировать это с хорошим подходом MVC. (кстати, я не могу использовать Router/Controller, потому что это расширение Chrome)

Единственный способ, которым я мог думать об этом, - это собрать все вместе в большом представлении... но я думаю, что, поскольку я довольно новичок в этом, есть, конечно, некоторые более подходящие подходы.

Ответы

Ответ 1

Вы можете создать модель, которая поддерживает состояние состояния входа пользователя и представление, которое отображает другой шаблон в зависимости от этого состояния. В представлении может отображаться шаблон "входного поля", если пользователь не зарегистрирован и другой шаблон, если пользователь. Я бы сохранил весь доступ к локальному хранилищу в модели, потому что представление не должно касаться сохранения. Представление, вероятно, также не должно касаться API-ключа, и поэтому у меня есть привязка моего представления к изменению loggedIn модели ('change: loggedIn') вместо изменения apiKey... хотя я показываю ключ API в одном моих шаблонов только для демонстрационных целей. Вот мой очень упрощенный образец. Обратите внимание, что я не потрудился проверить ключ API, но вы, вероятно, захотите:

Шаблоны:

<script id="logged_in" type="text/html">
    You're logged in.  Your API key is <%= escape('apiKey') %>. Let 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);