Test Backbone

by vbfischer

HTML

<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/overcast/jquery-ui.css">
<script src="http://documentcloud.github.com/backbone/examples/backbone-localstorage.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/core/amplify.core.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/store/amplify.store.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/request/amplify.request.js"></script>
<script src="https://raw.github.com/andyet/ICanHaz.js/master/ICanHaz.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script id="itemTemplate" type="x-jQuery-tmpl">
    hello
</script>

<div id="jobsummary_container">
    <div id="create_jobsummary">
        <div>
            <label>Job Number</label>
            <input type="text" id="JobNumber"/>
        </div>
        <div>
            <label>Group Type</label>
            <input type="text" id="GroupType"/>
        </div>
        <div>
            <label>Assigned Count</label>
            <input type="text" id="AssignedCount"/>
        </div>
        <div>
            <label>Unassigned Count</label>
            <input type="text" id="UnassignedCount"/>
        </div>
        <input type="button" value="Add" id="add_button"/>
    </div>
    <div>
        <table id="collection">
            <thead>
                <tr>Job Number</tr>
                <tr>Group Type</tr>
                <tr>Assigned</tr>
                <tr>Unassigned</tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

CSS

html, body {
    margin: 10px;
    padding: 0;
    overflow: hidden;  
    font-size: 75%;
    
}

#create_jobsummary div label {
    float: left;
    width: 75px;
}

#create_jobsummary div input {
    float: left;
    margin-left: 15px;
}

#create_jobsummary div {
    width: 500px;
    clear: both;
    height: 30px;
}

JavaScript

// **************************  DEFINE THE MODELS ****************
(function() {
    window.JobSummary = Backbone.Model.extend({
        defaults: {
            id: 0,
            JobNumber: 0,
            GroupType: "",
            AssignedCount: 0,
            UnassignedCount: 0
        }
    });
}).call(this);

(function() {
    window.JobSummaryList = Backbone.Collection.extend({
        model: JobSummary,

        localStorage: new Store("jobSummaryList")
    });
}).call(this);

// **************************  DEFINE THE VIEWS ******************
(function() {
    window.JobSummaryListView = Backbone.View.extend({
        el: $("#collection"),

        jobSummaryList: null,

        initialize: function() {
            amplify.subscribe("JobSummary.Update", this, function(jobData) {
                this.addOne(jobData);
            });
        },

        events: {},

        addOne: function(jobData) {
            console.log('adding');
            try {
                if (this.options.jobSummaryList !== null) {
                    this.options.jobSummaryList.add(jobData);
                    var view = new window.JobSummaryView({
                        jobSummary: jobData
                    });
                    this.$('tbody').append(view.render().el);
                } else {
                    console.log('is null');
                }
            } catch (err) {
                console.log(err);
            }
        }
    });
}).call(this);

(function() {
    window.JobSummaryEditView = Backbone.View.extend({
        el: $("#create_jobsummary"),

        events: {
            "click #add_button": "updateJobSummary"
        },

        initialize: function() {
            $("#add_button").button();
        },

        updateJobSummary: function(e) {
            var newJob = new window.JobSummary({
                id: 0,
                JobNumber: $("#JobNumber").val(),
                GroupType: $("#GroupType").val(),
                AssignedCount:...