PageRenderTime 18ms CodeModel.GetById 1ms app.highlight 14ms RepoModel.GetById 1ms app.codeStats 0ms

/Source/VidPub.Web/Public/javascripts/production-admin.js

http://github.com/tekpub/mvc3
JavaScript | 298 lines | 272 code | 17 blank | 9 comment | 3 complexity | 810aa4764388399b2788c873336c652c MD5 | raw file
  1
  2Episode = Backbone.Model.extend({
  3    defaults : {
  4        Title: "New Episode",
  5        Description : "Lorem Ipsum",
  6        ReleasedOn : "12/31/2011"
  7    },
  8    initialize: function () {
  9        this.bind("error", this.notifyCollectionError);
 10        this.bind("change", this.notifyCollectionChange);
 11    },
 12    idAttribute: "ID",
 13    url: function () {
 14        return this.isNew() ? "/api/episodes/create" : "/api/episodes/edit/" + this.get("ID");
 15    }
 16});
 17Episodes = Backbone.Collection.extend({
 18    model: Episode,
 19    url: function () {
 20        return "/api/episodes/?pid=" + this.ProductionID;
 21    }
 22});
 23Production = Backbone.Model.extend({
 24    defaults: {
 25        Title: "New Production",
 26        Author: "Joe Blow",
 27        Price: "25.00",
 28        Description: "Lorem Ipsum",
 29        ReleasedOn: "12/31/2011"
 30    },
 31    initialize: function () {
 32        this.bind("error", this.notifyCollectionError);
 33        this.bind("change", this.notifyCollectionChange);
 34    },
 35    idAttribute: "ID",
 36    url: function () {
 37        return this.isNew() ? "/api/productions/create" : "/api/productions/edit/" + this.get("ID");
 38    },
 39    validate: function (atts) {
 40        if ("Title" in atts & !atts.Title) {
 41            return "Title is required";
 42        }
 43    },
 44    notifyCollectionError: function (model, error) {
 45        this.collection.trigger("itemError", error);
 46    },
 47    notifyCollectionChange: function () {
 48        this.collection.trigger("itemChanged", this);
 49    }
 50
 51});
 52Productions = Backbone.Collection.extend({
 53    model : Production,
 54    url : "/api/productions"
 55});
 56productions = new Productions();
 57
 58ListView = Backbone.View.extend({
 59    tagName: "ol",
 60    initialize: function () {
 61        _.bindAll(this, 'render');
 62        this.template = $("#listTemplate");
 63        this.collection.bind("itemSaved", this.render);
 64    },
 65    events: {
 66        "click .production-link": "showForm",
 67        "click #new-production": "showCreate"
 68    },
 69    showCreate: function () {
 70        app.navigate("create", true);
 71        return false;
 72    },
 73    showForm: function (evt) {
 74        //get the ID that was clicked
 75        var id = $(evt.currentTarget).data('production-id');
 76        //navigate
 77        app.navigate("edit/" + id, true);
 78
 79        return false;
 80    },
 81    render: function () {
 82        var data = { items: this.collection.toJSON() };
 83        var html = this.template.tmpl(data);
 84        $(this.el).html(html);
 85        return this;
 86    }
 87
 88});
 89FormView = Backbone.View.extend({
 90
 91    initialize: function () {
 92        _.bindAll(this, "render");
 93        this.template = $("#productionFormTemplate");
 94    },
 95    events: {
 96
 97        "change input": "updateModel",
 98        "submit #productionForm": "save"
 99    },
100    save: function () {
101        this.model.save(
102            this.model.attributes,
103            {
104                success: function (model, response) {
105                    model.collection.trigger("itemSaved", model);
106                },
107                error: function (model, response) {
108                    model.trigger("itemError", "There was a problem saving " + model.get("Title"));
109                }
110            }
111        );
112        return false;
113    },
114    updateModel: function (evt) {
115        var field = $(evt.currentTarget);
116        var data = {};
117        var key = field.attr('ID');
118        var val = field.val();
119        data[key] = val;
120        if (!this.model.set(data)) {
121            //reset the form field
122            field.val(this.model.get(key));
123        }
124    },
125    render: function () {
126        var html = this.template.tmpl(this.model.toJSON());
127        $(this.el).html(html);
128        this.$(".datepicker").datepicker();
129        return this;
130    }
131});
132
133NotifierView = Backbone.View.extend({
134    initialize: function () {
135        this.template = $("#notifierTemplate");
136        this.className = "success";
137        this.message = "Success";
138        _.bindAll(this, "render", "notifySave", "notifyError");
139        //use the globals - no need to depend on a single collection
140        productions.bind("itemSaved", this.notifySave);
141        productions.bind("itemError", this.notifyError);
142    },
143    events: {
144        "click": "goAway"
145    },
146    goAway: function () {
147        $(this.el).delay(3000).fadeOut();
148    },
149    notifySave: function (model) {
150        this.message = model.get("Title") + " saved";
151        this.render();
152        this.goAway();
153    },
154    notifyError: function (message) {
155        this.message = message;
156        this.className = "error";
157        this.render();
158        this.goAway();
159   },
160    render: function () {
161        var html = this.template.tmpl({ message: this.message, className: this.className });
162        $(this.el).show();
163        $(this.el).html(html);
164        return this;
165    }
166});
167EpisodeFormView = Backbone.View.extend({
168    initialize: function () {
169        this.template = $("#episodeFormTemplate");
170    },
171    events: {
172        "submit #episodeForm": "save",
173        "change input": "updateModel"
174    },
175    save: function (evt) {
176        this.model.save(
177            this.model.attributes,
178            {
179                success: function (model, response) {
180                    alert(model.get("Title") + " saved");
181                },
182                error: function (model, response) {
183                    alert("Problems... " + response.responseText);
184                }
185            }
186        );
187        return false;
188    },
189    updateModel: function (evt) {
190        var field = $(evt.currentTarget);
191        var data = {};
192        var key = field.attr('ID');
193        var val = field.val();
194        data[key] = val;
195        if (!this.model.set(data)) {
196            //reset the form field
197            field.val(this.model.get(key));
198        }
199    },
200    render: function () {
201        var html = this.template.tmpl(this.model.toJSON());
202        $(this.el).html(html);
203        return this;
204    }
205});
206EpisodeListView = Backbone.View.extend({
207    initialize: function () {
208        this.template = $("#episodeListTemplate");
209        _.bindAll(this, "render");
210    },
211    events: {
212        "click .episode-link": "editEpisode",
213        "click #new-episode" : "newEpisode"
214    },
215    editEpisode: function (evt) {
216        var id = $(evt.currentTarget).data('episode-id');
217        var model = this.collection.get(id);
218        episodeForm = new EpisodeFormView({ model: model, el: "#episodeForm" });
219        episodeForm.render();
220        return false;
221    },
222    newEpisode : function(){
223        episodeForm = new EpisodeFormView({ model: new Episode(), el: "#episodeForm" });
224        episodeForm.render();
225        return false;
226
227    },
228    render: function () {
229        var data = { items: this.collection.toJSON() };
230        var html = this.template.tmpl(data);
231        $(this.el).show();
232        $(this.el).html(html);
233        return this;
234    }
235});
236
237var ProductionAdmin = Backbone.Router.extend({
238
239    initialize: function () {
240        listView = new ListView({ collection: productions, el: "#production-list" });
241        formView = new FormView({ el: "#production-form" });
242        notifierView = new NotifierView({ el: "#notifications" });
243    },
244    routes: {
245        "": "index",
246        "edit/:id": "edit",
247        "create": "create"
248    },
249    index: function () {
250        listView.render();
251    },
252    edit: function (id) {
253        listView.render();
254        $(notifierView.el).empty();
255        $(formView.el).empty();
256        //grab the model from the productions
257        var model = productions.get(id);
258        formView.model = model;
259        formView.render();
260
261        //grab the episodes
262        episodes = new Episodes();
263        episodes.ProductionID = id;
264        episodes.fetch({
265            success: function (model, response) {
266                episodeList = new EpisodeListView({ collection: episodes, el: "#episode-list" });
267                episodeList.render();
268            }
269        });
270    },
271    create: function () {
272        var model = new Production();
273        listView.render();
274        $(notifierView.el).empty();
275        $(formView.el).empty();
276        $("#episode-list").empty();
277        $("#episodeForm").empty();
278        formView.model = model;
279        formView.render();
280
281    }
282
283});
284
285jQuery(function () {
286
287    productions.fetch({
288        success: function () {
289            //create the router
290            window.app = new ProductionAdmin();
291            Backbone.history.start();
292        },
293        error: function () {
294            //display a nice error page
295        }
296    });
297
298});