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

Question

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

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

Поток выглядит следующим образом:

1. Start Extension
2. Есть ли API-ключ в localStorage?
3. No => Отобразить поле ввода и кнопку сохранения, которая сохраняет ключ в localStorage; Да => перейти к применению:
4. App ......

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

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