var Test = {}; $(document).ready(function() { Test.U = Backbone.Model.extend({ url: '/ts_api/users', initialize: function() { this.timelines = {}; } }); Test.E = Backbone.Model.extend({ url: '/ts_api/entries/jdbernard/work' }); Test.UView = Backbone.View.extend({ el: $("#user"), model: Test.U, initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); this.model.view = this; }, render: function() { this.$('.fullname').text(this.model.get('name')); this.$('.username').text(this.model.get('id')); } }); Test.EList = Backbone.Collection.extend({ model: Test.E, url: '/ts_api/entries/jdbernard/work', initalize: function(models, options) { this.user = options.user; }, comparator: function(entry) { return entry.get('timestamp'); } }); Test.EView = Backbone.View.extend({ model: Test.E, initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); this.model.view = this; }, render: function() { $(this.el).html("" + this.model.get('id') + "" + this.model.get('mark') + ""); return this; } }); Test.EListView = Backbone.View.extend({ el: $("#entry-list"), initialize: function() { _.bindAll(this, 'render', 'refresh', 'addOne'); this.collection.bind('add', this.addOne); this.collection.bind('refresh', this.refresh); }, addOne: function(entry) { var view = new Test.EView({model: entry}); $(this.el).append(view.render().el); }, refresh: function() { $(this.el).empty(); var thisRef = this; this.collection.each(function(entry) {thisRef.addOne(entry)}); } }); Test.currentUser = new Test.U; Test.userView = new Test.UView({model: Test.currentUser}); // wire the login dialog using jQuery UI $("#login-dialog").dialog({ autoOpen: false, height: 400, width: 400, modal: true, buttons: { Login: function(){login()} } }); $('#login-dialog').dialog('open'); }); function login() { // lookup the login dialog elements var name = $("#login-name"); var pwd = $("#login-password"); // call the API via AJAX $.ajax({ url: "/ts_api/login", processData: false, data: JSON.stringify({username: name.val(), password: pwd.val()}), type: "POST", error: function(jqXHR, textStatus, error) { // assuming bad credentials (possible server error or bad request, // we should check that, FIXME var tips = $(".validate-tips"); tips.text("Incorrect username/password combination."); tips.addClass("ui-state-error"); tips.slideDown(); }, success: function(data, textStatus, jqXHR) { $("#login-dialog").dialog('close'); Test.currentUser.set({id: name.val()}, {silent: true}); Test.currentUser.fetch(); Test.currentEntryList = Test.currentUser.timelines['work'] = new Test.EList([], {user: Test.currentUser}); new Test.EListView({collection: Test.currentEntryList}); Test.currentEntryList.fetch(); }}); }