This is the login component.

about

This is the login component.
It uses the Facebook component as a login provider.
It doesn't need a template file because the template is part of the index page.

login.html

<div class="login pull-right">
    <button class="btn btn-inverse">Login</button>
    <div class="message"></div>
</div>

<script type="text/template" id="login-message">
    <p class="navbar-text">Logged in as <a href="http://www.facebook.com/<%=id %>"><%=name %></a> <i class="icon-remove-sign icon-white" title="Logout"></i></p>
</script>

login.js

define(['backbone', 'facebook'], function (backbone, facebook) {
    var view = backbone.View.extend({
        el: '.navbar .login',
        message: this.$('.message'),
        button: this.$("button"),
        events: { "click button": "login" },
        initialize: function () {
            this.login();
        },
        authInfo: function (callback, id) {
            facebook.status(function (status) {
                if (status.status == 'connected') facebook.info(callback, id);
                else
                    facebook.login(function (response) {
                        if (response.authResponse) facebook.info(callback, id);
                    });
            });
        },
        login: function () {
            var me = this;
            this.authInfo(function (user) {
                var compiledTemplate = _.template($('#login-message').html(), user);
                me.message.html(compiledTemplate);
                me.button.hide();
                me.message.find('i').click(function () {
                    facebook.logout();
                    me.button.show().siblings().empty();
                });
            });
        }
    });

    return view;
});