backbone.html | searchcode

/example/chat/views/backbone.html

https://github.com/lsalvay/PonyExpress
HTML | 175 lines | 153 code | 18 blank | 4 comment | 0 complexity | b4d37e650f9af793f30b0974ab441151 MD5 | raw file

<html>
<head>
	<title>PonyExpress</title>
	<style>
	.highlighted {
		background: grey;
	}
	</style>
	<!-- dependencies !-->
	<script type="text/javascript" src="dependencies/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="dependencies/neon.js"></script>
	<script type="text/javascript" src="dependencies/CustomEvent.js"></script>
	<script type="text/javascript" src="dependencies/CustomEventSupport.js"></script>
	<script type="text/javascript" src="socket.io/socket.io.js"></script>

	<!-- backbone !-->
	<script type="text/javascript" src="dependencies/underscore-min.js"></script>
	<script type="text/javascript" src="dependencies/backbone.js"></script>

	<!-- library !-->
	<script type="text/javascript" src="lib/PonyExpress.js"></script>
	<script type="text/javascript" src="lib/Plug.js"></script>
	<script type="text/javascript" src="lib/BackbonePlug.js"></script>
	<!-- demo code !-->
	<script type="text/javascript">
	// Pony Expless and backbone collections are outside document ready because data layer is not relevant to the dom existing.
	/* Iniciamos PonyExpress indicando donde escucha nuestro socket */
	window.ponyExpress = new PonyExpress({
		io : "http://localhost:3000"
	});
	/* Creo un modelo de mensaje con un modelo de backbone extendido indicando cual es la url donde realiza el POST de los mensajes */
	window.MessageModel = Backbone.Model.extend({
		urlRoot : "/messages",
	});
	/* Creo una colecion de mensajes backbone extendida en donde incuimos el mensaje y junto a el el modelo del mensaje */
	window.MessageCollection =  Backbone.Collection.extend({
		name  : "message",
		model : window.MessageModel
	});
        /* Creo una coleccion apartir del constructor anterior */
	window.messageCollection = new MessageCollection();
	/* Inicio un bind de pony */
	window.ponyExpress.bind('connect', function(){
		/* Obtengo el json de los mensajes */
		var xhrMessages = $.get('/messages');
		/* Si todo sale bien ejecuto la funcion */
		xhrMessages.done(function(data){
			/* Agrego los datos a la coleccion de mensajes */
			window.messageCollection.add(data);
			/* Creo un Plug de pony en donde agrego mi colecion de mensajes */
			window.messagePlug  = new PonyExpress.BackbonePlug({
				collection : window.messageCollection
			});			
		});
	});
	/* Inicio jQuery */
	$(document).ready(function(){
		/* Chat View  sera una vista de backbone extendida con los eventos que se aplicaran sobre la vista del chat */
		/* Evento SEND RENDER e INITIALIZE */
		window.ChatView = Backbone.View.extend({
			tpl: _.template( $('#chat-template').html() ),
			events : {
				"click #submit" : "send"
			},
			initialize : function(config){
				var chatView = this;

				this.$el = this.targetElement || this.$el;
				this.el = this.$el[0];

				this.render();
				this.$el.appendTo('#chat');

				window.messageCollection.on('add', function(messageModel){
					var messageView = new MessageView({
						model: messageModel,
						id: "message-" + messageModel.id
					});

					messageView.$el.prependTo( chatView.$el.find('.messages') );
				});
			},
			send : function(){
				var user = this.$el.find('#user').val(),
					text = this.$el.find('#text').val();

				if( !user || !text ){
					return;
				}

				var model = new MessageModel({user: user, text: text});

				//Is added after the 
				model.save();
				
				this.$el.find('#text').val("");
			},
			render : function(){
				this.$el.html( this.tpl({}) );
			}
		});
		/* Creo una vista extendida de backbone para cada mensaje con la funcion de FAV y remover el mensaje */
		window.MessageView = Backbone.View.extend({
			tpl: _.template( $('#message-template').html() ),
			events : {
				"click .highlight" : "highlightHandler",
				"click .remove"    : "removeHandler"
			},			
			initialize : function(config){
				var messageView = this;

				this.render();

				this.model.on('change', function(){
					messageView.render();
				});

				this.destroyHandler = function(){
					console.log('destroying', this.toJSON() );
					messageView.remove();
				}

				this.model.on('destroy', this.destroyHandler);

				return this;
			},
			highlightHandler : function(){

				if(this.model.get('highlight')){
					this.model.set('highlight', false);
				}else{
					this.model.set('highlight', true);
				}
				this.model.save();

				this.render();
			},
			removeHandler : function(){
				this.model.off('destroy', this.destroyHandler);
				this.model.destroy();
				this.remove();
			},
			render : function(){
				this.$el.html( this.tpl( this.model.toJSON() ) );

				if(this.model.get('highlight')){
					this.$el.addClass('highlighted');
				}else{
					this.$el.removeClass('highlighted');
				}
			}
		});
		/* Creo un chat view bajo el id Chat */
		window.chat = new window.ChatView({
			targetElement : $('#chat')
		})
	});
	/* Fin jQuery */
	</script>
</head>
<body>
	<div id="chat"></div>
	<script type="text/template" id="chat-template">
		<p>User : <input id="user" type="text"/></p>
		<p>Message: <textarea id="text"></textarea></p>
		<p><button id="submit">Enviar</button></p>
		<div class="messages"/>
	</script>
	<script type="text/template" id="message-template">
		<h2><%= user %></h2>
		<p><%= text %></p>
		<p><label class="highlight">Highlight</label> <label class="remove">Remove</label></p>
	</script>
</body>
</html>