web-dev-qa-db-ja.com

Backbone.js-「ログイン」を処理する方法は？

こんにちは私は数日間backbone.jsに頭を包み込もうとしていますが、これが私の最初のMVCフレームワークであるため、かなり難しいです。

コレクションを簡単に機能させたり、サーバーからデータをフェッチしたりできますが、それはすべてAPIキーごとの最初の「ログイン」に依存します。良いMVCアプローチでこれをモデル化する方法がわかりません。 （ところで：ルーター/コントローラーはChrome拡張機能）なので使用できません

フローは次のようになります：

  1. 開始拡張
  2. LocalStorageにAPI-Keyはありますか？
  3. いいえ=>入力フィールドとキーをlocalStorageに保存する保存ボタンを表示します。 はい =>アプリケーションを続行します：
  4. アプリ....。

私が考えることができる唯一の方法は、すべてを大きなビューにまとめることです...しかし、私はこれにかなり慣れていないので、確かにいくつかのより良いアプローチがあると思います。

javascriptbackbone.js
23
algorithms

ユーザーのログインステータスの状態を維持するモデルと、そのステータスに応じて異なるテンプレートをレンダリングするビューを作成できます。ビューには、ユーザーがログインしていない場合は「入力フィールド」テンプレートを表示し、ログインしている場合は別のテンプレートを表示できます。ビューは永続性に関係するべきではないため、モデル内のlocalStorageへのすべてのアクセスを維持します。ビューはおそらくAPIキーにも関係していないはずです。そのため、APIキーを1つに表示していますが、ビューをapiKeyの変更ではなくモデルのloggedIn変更（ 'change：loggedIn'）にバインドしています。デモ目的でのみ私のテンプレートの。これが私の非常に単純化されたサンプルです。 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);
48
Johnny Oshika