page.js

var $ = window.$;
var PageView = require('./base');
var templates = require('../templates');
var HM = require('human-model');

var Model = HM.define({
    props: {
        name: 'string'
    }
});

var andbutton = function (el) {
    var $el = $(el);

    $el.click(function () {
        window.alert('hi');
    });
};

var andmodal = function (el) {
    var template = "<and-modal><and-modal-head> Hi!  </and-modal-head> <and-modal-body> Stuff </and-modal-body><and-modal>";
    var $html = $(template);

    $(el).children().each(function () {
        var tagname = $(this).prop('tagName');
        var orig = $html.find(tagname);
        if (orig.length) {
            $(orig[0]).replaceWith(this);
        }
    });

    $(el).replaceWith($html);
};

PageView.registerElement = function (tagname, fn) {
    PageView.customElements = PageView.customElements || {};
    PageView.customElements[tagname] = fn;
};

PageView.registerElement('and-button', andbutton);
PageView.registerElement('and-modal', andmodal);

PageView.prototype.renderElements = function () {
    var self = this;
    Object.keys(PageView.customElements).forEach(function (key) {
        var fn = PageView.customElements[key];

        self.$(key).each(function () {
            fn(this);
        });
    });
};


module.exports = PageView.extend({
    title: 'home',
    template: templates.pages.home,
    textBindings: {
        name: '.name'
    },
    render: function () {
        window.model = this.model = new Model({name: 'foo'})
        this.renderAndBind(this.model);

        this.renderElements();
    }
});

template.jade

section.page.home
  h2 Welcome to a skeleton for Foo

  p If you "view source" you'll see it's 100% client rendered.

  p Click around the site using the nav bar at the top. 

  p Things to note:
    ul
      li The url changes, no requests are made to the server.
      li Refreshing the page will always get you back to the same page
      li Page changes are nearly instantaneous
      li In development mode, you don't need to restart the server to see changes, just edit and refresh.
      li In production mode, it will serve minfied, uniquely named files with super agressive cache headers. To test:
        ul 
          li in dev_config.json set <code>isDev</code> to <code>false</code>.
          li restart the server.
          li view source and you'll see minified css and js files with unique names.
          li open the "network" tab in chrome dev tools (or something similar). You'll also want to make sure you haven't disabled your cache.
          li without hitting "refresh" load the app again (selecting current URL in url bar and hitting "enter" works great).
          li you should now see that the JS and CSS files were both served from cache without making any request to the server at all.

  p.name Yeah!

  and-button Hi

  and-modal
    and-modal-head
      hi! <span class=name></span>
    and-modal-body
      p Hi there
      p.name