Derived Props

gistfile1.txt

// -------------
// templates/body.jade
// -------------

body
  nav.navbar.navbar-default
    div.container-fluid
      div.navbar-header
        a.navbar-brand(href='/') VibraGenix
      ul.nav.navbar-nav
        li(data-hook="nav-login"): a(href="/login") Login
        li(data-hook="nav-logout"): a(href="/logout") Logout
  .container
    main(data-hook="page-container")
    footer.footer-main


// -------------
// models/me.js
// -------------

var Model = require('./base');
var UserSubscriptions = require('./user_subscriptions');
var Cookie = require('cookie-component');

module.exports = Model.extend({
    type: 'user',
    url: function () {
        return app.config.apiUrl + '/me.json';
    },
    props: {
        id: ['number']
    },
    derived: {
        sessionId: {
            cache: false,
            fn: function () {
                return Cookie.get('sessionId') || '';
            }
        },
        loggedIn: {
            cache: false,
            // deps: ['id'],
            fn: function () {
                return !!$.trim(app.me.sessionId);
            }
        }
    },
    collections: {
        user_subscriptions: UserSubscriptions
    },
    createSession: function (email, password) {
        var self = this;
        $.ajax({
            type: 'POST',
            url: app.config.apiUrl + '/session.json',
            data: { 
                session: {
                    email: email,
                    password: password
                }
            },
            dataType: 'json'
        }).done(function (obj, success, res) {
            if (res.status === 201) {
                Cookie.set('sessionId', obj.data.session_id);
                self.set({ id: obj.data.user_id });
                app.navigate('/');
            } else {
                // TODO
                console.log('login failed');
            }
        });
    },
    destroySession: function () {
        var self = this;
        $.ajax({
            type: 'DELETE',
            url: app.config.apiUrl + '/session.json',
            dataType: 'json'
        }).done(function (obj, success, res) {
            if (res.status === 200) {
                Cookie.set('sessionId', '');
                self.set({ id: null });
                app.navigate('/login');
            } else {
                // TODO
                console.log('logout failed');
            }
        });
    }
});


// -------------
// views/main.js
// -------------

var app = require('ampersand-app');
var setFavicon = require('favicon-setter');
var View = require('ampersand-view');
var dom = require('ampersand-dom');
var ViewSwitcher = require('ampersand-view-switcher');
var _ = require('lodash');
var domify = require('domify');
var localLinks = require('local-links');
var templates = require('../templates');

module.exports = View.extend({
    template: templates.body,
    autoRender: true,
    initialize: function () {
        this.listenTo(app, 'page', this.handleNewPage);
    },
    events: {
        'click a[href]': 'handleLinkClick'
    },
    bindings: {
        'model.loggedIn': {
            type: 'toggle',
            yes: '[data-hook=nav-logout]',
            no: '[data-hook=nav-login]'
        }
    },
    render: function () {
        document.head.appendChild(domify(templates.head()));
        this.renderWithTemplate(this);

        this.pageSwitcher = new ViewSwitcher(this.queryByHook('page-container'), {
            show: function (newView, oldView) {
                document.title = _.result(newView, 'pageTitle') || 'VibraGenix';
                document.scrollTop = 0;

                dom.addClass(newView.el, 'active');

                app.currentPage = newView;
            }
        });

        setFavicon('/favicon.ico');
        return this;
    },

    handleNewPage: function (view) {
        this.pageSwitcher.set(view);

        this.updateActiveNav();
    },

    handleLinkClick: function (e) {
        var localPath = localLinks.pathname(e);
        
        if (localPath) {
            e.preventDefault();
            app.navigate(localPath);
        }
    },

    updateActiveNav: function () {
        var path = window.location.pathname.slice(1);

        this.queryAll('.nav a[href]').forEach(function (aTag) {
            var aPath = aTag.pathname.slice(1);

            if ((!aPath && !path) || (aPath && path.indexOf(aPath) === 0)) {
                dom.addClass(aTag.parentNode, 'active');
            } else {
                dom.removeClass(aTag.parentNode, 'active');
            }
        });
    }
});