Trying a view for user, timeline(s), entry(ies).
This commit is contained in:
138
www/js/ts.js
138
www/js/ts.js
@ -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
|
||||
}});
|
||||
}
|
||||
|
Reference in New Issue
Block a user