Trying a view for user, timeline(s), entry(ies).

This commit is contained in:
Jonathan Bernard
2011-04-20 09:40:54 -05:00
parent aec172536e
commit 9025a2f8f6
8 changed files with 223 additions and 53 deletions

View File

@ -13,7 +13,7 @@ $(document).ready(function(){
* - notes
* - start
*/
TS.Entry = Backbone.Model.extend({
TS.EntryModel = Backbone.Model.extend({
});
@ -23,7 +23,7 @@ $(document).ready(function(){
* - desc
* - created
*/
TS.Timeline = Backbone.Model.extend({
TS.TimelineModel = Backbone.Model.extend({
});
@ -34,29 +34,41 @@ $(document).ready(function(){
* - email
* - join_date
*/
TS.User = Backbone.Model.extend({
TS.UserModel = Backbone.Model.extend({
});
TS.EntryList = Backbone.Collection.extend({
model: TS.Entry,
model: TS.EntryModel,
comparator: function(entry) { return entry.get('timestamp'); },
initialize: function() {
_.bindAll(this, "ur");
initialize: function(model, options) {
if (options.timeline == undefined) {
throw "Cannot create an EntryList without a TimelineModel reference."
} else { this.timeline = options.timeline; }
_.bindAll(this, "url");
},
url: function() {
return "/entries/" + TS.currentUser.get('username') + "/" + this.timeline.get('id');
return "/entries/" + this.timeline.get('user_id') + "/" + this.timeline.get('id');
}
});
TS.TimelineList = Backbone.Collection.extend({
model: TS.Timeline,
model: TS.TimelineModel,
initialize: function(models, options) {
if (options.user == undefined) {
throw "Cannot create a TimelineList without a UserModel reference.";
} else { this.user = options.user; }
_.bindAll(this, 'url');
},
url: function() {
return "/timelines/" + TS.currentUser.get('username');
return "/ts_api/timelines/" + this.user.get('id');
}
});
@ -67,7 +79,7 @@ $(document).ready(function(){
*/
TS.EntryView = Backbone.View.extend({
model: TS.Entry,
model: TS.EntryModel,
events: {
"dblclick div.mark" : "editMark",
@ -111,11 +123,32 @@ $(document).ready(function(){
}
});
TS.EntryListView = Backbone.View.extend({
el: $("#entries"),
initialize: function() {
_.bindAll(this, 'addOne', 'render');
this.collection.bind('add', this.addOne);
this.collection.bind('refresh', this.render);
this.collection.view = this;
},
addOne: function(entry) {
$(this.el).append(entry.view.render().el);
},
render: function() {
$(this.el).empty();
this.collection.each(this.addOne);
}
});
TS.TimelineView = Backbone.View.extend({
el: $("#timeline"),
model: TS.Timeline,
model: TS.TimelineModel,
events: {
"dblclick .timeline-id" : "editId",
@ -125,7 +158,8 @@ $(document).ready(function(){
},
initialize: function() {
_.bindAll(this, 'render', 'close');
_.bindAll(this, 'render', 'close', 'editId', 'editDesc',
'updateOnEnter');
this.model.bind('change', this.render);
this.model.view = this;
},
@ -161,11 +195,42 @@ $(document).ready(function(){
}
});
TS.TimelineListView = Backbone.View.extend({
el: $("#timeline .drop-menu-items"),
events: {
'click #timeline .drop-menu-items a': 'selectTimeline'
},
initialize: function() {
_.bindAll(this, 'addOne', 'render');
this.collection.bind('add', this.addOne);
this.collection.bind('refresh', this.refresh);
this.collection.view = this;
},
addOne: function(timeline) {
$(this.el).append(ich.timelineLink(timeline.toJSON()));
},
render: function() {
$(this.el).empty();
this.collection.each(this.addOne);
return this;
},
selectTimeline: function() {
// note that this refers to the element that initiated this event
// TODO
}
});
TS.UserView = Backbone.View.extend({
el: $("user"),
model: TS.User,
model: TS.UserModel,
events: {
'dblclick .fullname': 'editFullname',
@ -173,7 +238,7 @@ $(document).ready(function(){
},
initialize: function() {
_.bindAll(this, 'render', 'close');
_.bindAll(this, 'render', 'close', 'editFullname', 'updateOnEnter');
this.model.bind('change', this.render);
this.model.view = this;
},
@ -181,6 +246,7 @@ $(document).ready(function(){
render: function() {
this.$('.fullname').text(this.model.get('name'));
this.$('.username').text(this.model.get('id'));
return this;
},
editFullname: function() {
@ -200,13 +266,6 @@ $(document).ready(function(){
}
});
TS.currentUser = {};
TS.currentUser.model = new TS.User({
id: $("#user .username").text(),
name: $("#user .fullname").text() });
TS.currentUser.view = new TS.UserView(TS.currentUser.model);
})
function login() {
@ -231,6 +290,41 @@ function login() {
},
success: function(data, textStatus, jqXHR) {
TS.currentUser = new TS.User(); // TODO
// initialize the app data
// TODO: possiblty replace by script generated server-side
// create the user model
TS.user = new TS.UserModel({
id: name.val();,
name: '' });
// create the user view
new TS.UserView({model: TS.user});
// fetch the initial user data from the server
TS.user.fetch();
// create the user's timelines
TS.timelineList = new TS.TimelineList([], {user: TS.user});
// create the timeline list view
new TS.TimelineListView({collection: TS.timelineList});
TS.timelineList.fetch();
// load the current timeline
TS.currentTimeline = TS.timelineList.at(0);
// create the timeline view
new TS.TimelineView({model: TS.currentTimeline});
// render the timeline view
TS.currentTimeline.view.render();
// load the entries for this timeline
TS.entryList = new TS.EntryList([], {timeline: TS.currentTimeline});
// create the new entry list view
new TS.EntryListView
}});
}