Backgrid AGC

by erichbschulz

HTML

<script src="http://wyuenho.github.com/backgrid/assets/js/jquery.js"></script>
<script src="http://wyuenho.github.com/backgrid/assets/js/underscore.js"></script>
<script src="http://wyuenho.github.com/backgrid/assets/js/backbone.js"></script>
<link rel="stylesheet" href="http://wyuenho.github.com/backgrid/lib/backgrid.css">
<link rel="stylesheet" href="http://wyuenho.github.com/backgrid/assets/css/bootstrap.css">
<script src="http://wyuenho.github.io/backgrid/lib/backgrid.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.1-bundled/backbone.marionette.min.js"></script>
<script id="agcFocusSummary" type="text/html">
    I think that <%= showMessage() %>
</script>

<h1>Entity Grid</h1>

<div id="agcElectionGrid"></div>http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.1-bundled/backbone.marionette.min.js

<h1>Focus Grid</h1>

<div id="agcFocusGrid"></div>

<h1>Focus Item</h1>

<div id="agcFocusItem"></div>

JavaScript

//=================================================

var agcApp = new Backbone.Marionette.Application();

agcApp.addRegions({
    focusRegion: "#agcFocusItem"
});

agcApp.addInitializer(function (options) {
    ////////////////////////////////////
    /// models and collections:
    ////////////////////////////////////

    ////////// focus - container for application global focus
    var Focus = Backbone.Model.extend({
        defaults: {
            actve: false,
            poly: -1,
            contact: -1,
            election: -1,
            booth: -1
        },
        initialize: function () {
            this.on('change:election', this.electionChange, this);
        },
        electionChange: function () {
            console.log('my elceciont is differnt');
            if (this.get('active')) {
                agcApp.vent.trigger("focus:change:election", this.get('election'));
            }
        }
    });
    var FocusCollection = Backbone.Collection.extend({
        model: Focus
    });
    ////////// election
    var Election = Backbone.Model.extend({
        // overide parent method to allow direction of get to method
        get: function (attr) {
            if (typeof this[attr] == 'function') {
                return this[attr]();
            }
            return Backbone.Model.prototype.get.call(this, attr);
        },
        sortOrder: function () { // experimental calculated attribute
            return this.get('name') + ' ' + this.get('description');
        },
        date: function () { // experimental calculated attribute
            // fixme
            return (this.get('date_is_approximate') ? 'approx ' : '') + this.get('date');
        },
        initialize: function () {
            this.on('change:select', this.selected, this);
        },
        label: function () {
            this.get('name');
        },
        selected: function () {
            agcApp.vent.trigger("focus:change:election", this.get('id'));
        }
   ...