notification.js: Notifications list view of Backbone.js. When the icon for notification is tapped, the view for notifications will be rendered, and it listens to the event of a new push is received, and will fetch new notifications and re-render the view afterwards. A unread notification being tapped on will be marked as read and saved to server.

notification.js

define([
// Application.
"app"],

function(app) {

  var Notification = app.module();

	Notification.Model = Backbone.Model.extend({
		unread: function(){
			return this.get("unread") === true;
		}
	});

	Notification.Collection = Backbone.Collection.extend({
		url: "http://www.cloud2health.com/api/notifications",
		model: Notification.Model,
		comparator: function(notify){
			var date = new Date(notify.get('created_at'));
			return -date.getTime();
		}
	});

	Notification.Views.Notifications = Backbone.View.extend({
		template: "notification/notifications",
		initialize: function(){
			this.listenTo(this.collection, 'add', this.render);
			this.listenTo(this.collection, 'reset', this.render);
			this.collection.fetch({data: {user_id: app.user.id}});
		},
		events:{
			'click li' : "readNotification"
		},
		readNotification: function(e){
			var id = $(e.currentTarget).data("id");
			var notification = this.collection.get(id);
			notification.set('unread', false);
			$(e.currentTarget).removeClass("ensa");
			notification.save({unread: false}, {
				success: function(model, response, options){
					// $(e.currentTarget).removeClass("ensa");
				},
				error: function(model, xhr, options){
					console.log(xhr.responseText);
				}
			});
		},
		serialize: function() {
			return {
				notifications: this.collection
			};
		}
	});

	// Required, return the module for AMD compliance.
	return Notification;

});