app-js.blade.php

{{-- This area is for mounting global JS objects. --}}

<script>

    "use strict";

    /**
     * Please keep App and its dependencies lean. It's loaded everywhere.
     *
     * @constructor
     */
    function App() {

        @include('js.view-js')

    }

    // ShineOn will go on the window object as our App.
    var ShineOn = new App();

</script>

templates.blade.php

<script id="tpl-alert" type="x-handlebar-template">
    <div style="margin: 15px -15px;" class="alert alert-@{{ type }}" role="alert">
        @{{#if dismissable }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        @{{/if}}

        @{{#if icon}}
        <i class="fa fa-@{{ icon }}"></i> &nbsp;
        @{{/if }}

        @{{#if escape}}
            @{{{ message }}}
        @{{else}}
            @{{ message }}
        @{{/if}}
    </div>
</script>

view-js.blade.php

function View() {

    // Templates that have already been lazy compiled.
    var registered = {};

    // Context data that is available in all templates.
    var shared = {};

    /**
     * Lazy compile and get global templates.
     */
    this.get = function(template) {
        if (typeof registered[template] == 'undefined') {
            this.register(template);
        }

        return registered[template];
    };

    /**
     * Register a template globally.
     */
    this.register = function(template) {
        var tpl = $('#tpl-'+template);
        if (tpl.length == 0) {
            throw 'ShineOn.View Exception: #tpl-'+template+'template not found.';
            return;
        }
        registered[template] = Handlebars.compile(tpl.html());

        return this;
    };

    /**
     * Add data to the global context.
     */
    this.share = function(object) {
        $.extend(shared, object);

        return this;
    };

    /**
     * Render the template with the context.
     */
    this.render = function(template, context) {
        var tpl = this.get(template);
        var data = $.extend({}, context);
        // We have a chance to supplement the context for all views here.
        console.log('template', template, tpl);
        return tpl($.extend(data, shared));
    };

}

View.prototype = {

    constructor: View,

    /**
     * Friendly global views are as:
     *
     *      e.g.    ShineOn.View.alert({ message: 'Oops, you broke it.' });
     */
    alert: function(context) {
        var data = $.extend({
            message: 'An error occurred.',
            type: 'danger',
            dismissable: true,
            escape: false,
            icon: 'info'
        }, context);
        return this.render('alert', data);
    }

};

this.View = new View();