erichocean · April 7, 2010 05:01
diff --git a/first hub.js demo ever b/first hub.js demo ever
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Hub Demo</title>
    
    <style type="text/css" media="screen">
      
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="hub.js"></script>
    
    <script type="text/javascript" charset="utf-8">
      var WS;
      function setupPush(store) {
        // Setup WebSocket
        if (window.WebSocket) {
          SproutDB.webSocket = new WebSocket("ws://localhost:8000/memstore");
          var WS = SproutDB.webSocket;
          WS.onopen = function() { 
            sc_log("Connection open ...") ;
            WS.send("READY") ;
          };

          WS.onmessage = function(evt) { 
            SC.RunLoop.begin() ;
            // sc_log( "^ Received Message "); 
            var data = evt.data, pk ;
            sc_log("Got Message from Socket:") ; // sc_log(data) ;
            if (data.indexOf("#") === 0) {
              sc_log("#"+data) ;
            } else if (data.indexOf(":") === -1) { // This is an array of pk's
              sc_log("Key List");
              var pks = SC.json.decode(data),
                  i = pks.length, fetched = 0 ;
              while (i--){
                pk = pks[i] ;
                // sc_log("^ Checking PK: "+pk);
                if (!store.hasCommit(pk)) {
                  sc_log("^ Getting PK: "+pk) ;
                  fetched++;
                  WS.send(pk);
                }
              }  
              var keysToSend = store.extraKeys(pks) ;
              keysToSend.forEach(function(key){
                store.sendPack(key);
              });
              // if (fetched === 0) {
              //   WS.send("PING");
              // }
            } else { // it's a pack
              pk = data.substr(0,64) ;
              var json = data.substr(65) ;
              sc_log("^ Adding Pack: "+pk) ;
              // sc_log(json);
              var pack = SC.json.decode(json) ;
              store.addPack(pack, pk) ;
            }
            SC.RunLoop.end() ;
          };

          WS.onclose = function(evt) { 
            sc_log("Connection closed.") ; 
          };
          
          // Hook into store to be told when a pack is commited.
          store.packCommitted = function(version, pack) {
            sc_log("Sending Pack") ;
            WS.send(version+":"+SC.json.encode(pack)) ;
          }
          
          
        }
      }
      
      Todos = hub.Object.create({
        store: SC.Hub.create({
          uti: 'com.hub.demo.web',
          commitRecordsAutomatically: YES
        }),
        
        tasks: null,
        
        addTask: function() {
          sc_log('About to add a new task');
          var reply = prompt("Task Description", "New Task") ;
          Todos.store.createRecord(Todos.Task, {
            description: reply,
            isDone: false
          })
        }
        
      });
      
      Todos.Task = SC.Record.extend({
        isDone: SC.Record.attr(Boolean),
        description: SC.Record.attr(String)
      }) ;
      
      Todos.TaskListView = SC.Object.create({
        
        layerId: 'tasks',
        contentBinding: 'Todos.tasks',
        contentLengthBinding: '*content.length',
        
        contentLengthDidChange: function() {
          sc_log('updating list');
          this.updateList();
        }.observes('contentLength'), //'content', 'content.[]'
        
        updateList: function() {
          var content = this.get('content'),
              layerId = '#'+this.get('layerId'),
              layer   = $(layerId),
              id, isDone, checked, newEle ;
          
          layer.empty();
          content.forEach(function(item, idx) {
            id = item.get('guid') ;
            isDone = item.get('isDone') ;
            checked = isDone ? " checked=checked " : ""
            newEle = "<li id='task-%@' id> <input type=checkbox %@ name='%@'> %@</li>"
              .fmt(idx, checked, 'isDone', item.get('description')) ;
              
            layer.append(newEle) ;
            newEle = $('#task-%@'.fmt(id)) ;
            
            if(isDone) {
              newEle.addClass('done') ;
            }
          }) ;
          $(layerId+' :checkbox').click(this.checkBoxClicked) ;
          
        },
        
        checkBoxClicked: function(event) {
          Todos.target = event.target ;
          var idx = $(event.target).parent().attr('id').split("-")[1],
              obj = Todos.get('tasks').objectAt(idx) ;
          // sc_log(obj.get('description')) ;
          obj.setIfChanged('isDone', !obj.get('isDone')); // Toggle The value.
          SC.RunLoop.invokeLast(Todos.TaskListView, 'updateList')
        }
        
      })
      
      function main() {
        sc_log('Running Main');
        Todos.store.checkout() ;
        
        var tasks = Todos.store.find(SC.Query.local(Todos.Task, {
          orderBy: 'isDone,description'
        })) ;
        Todos.set('tasks', tasks) ;
        
        // JQuery Code.
        $('#addTask').click(function(event) {
          hub.run(Todos.addTask, Todos) ;
        });
        
        setupPush(Todos.store);
        
      }
    </script>
    
  </head>
  <body id="demo">
    <h1 id="title">Todos</h1>
    
    <div id="button-bar">
      <input type="button" name="addTask" value="New Task" id="addTask">
    </div>
    
    <ul id="tasks">
      
    </ul>
  </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Hub Demo</title>

	<style type="text/css" media="screen">

	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="hub.js"></script>

	<script type="text/javascript" charset="utf-8">
	var WS;
	function setupPush(store) {
	// Setup WebSocket
	if (window.WebSocket) {
	SproutDB.webSocket = new WebSocket("ws://localhost:8000/memstore");
	var WS = SproutDB.webSocket;
	WS.onopen = function() {
	sc_log("Connection open ...") ;
	WS.send("READY") ;
	};

	WS.onmessage = function(evt) {
	SC.RunLoop.begin() ;
	// sc_log( "^ Received Message ");
	var data = evt.data, pk ;
	sc_log("Got Message from Socket:") ; // sc_log(data) ;
	if (data.indexOf("#") === 0) {
	sc_log("#"+data) ;
	} else if (data.indexOf(":") === -1) { // This is an array of pk's
	sc_log("Key List");
	var pks = SC.json.decode(data),
	i = pks.length, fetched = 0 ;
	while (i--){
	pk = pks[i] ;
	// sc_log("^ Checking PK: "+pk);
	if (!store.hasCommit(pk)) {
	sc_log("^ Getting PK: "+pk) ;
	fetched++;
	WS.send(pk);
	}
	}
	var keysToSend = store.extraKeys(pks) ;
	keysToSend.forEach(function(key){
	store.sendPack(key);
	});
	// if (fetched === 0) {
	// WS.send("PING");
	// }
	} else { // it's a pack
	pk = data.substr(0,64) ;
	var json = data.substr(65) ;
	sc_log("^ Adding Pack: "+pk) ;
	// sc_log(json);
	var pack = SC.json.decode(json) ;
	store.addPack(pack, pk) ;
	}
	SC.RunLoop.end() ;
	};

	WS.onclose = function(evt) {
	sc_log("Connection closed.") ;
	};

	// Hook into store to be told when a pack is commited.
	store.packCommitted = function(version, pack) {
	sc_log("Sending Pack") ;
	WS.send(version+":"+SC.json.encode(pack)) ;
	}


	}
	}

	Todos = hub.Object.create({
	store: SC.Hub.create({
	uti: 'com.hub.demo.web',
	commitRecordsAutomatically: YES
	}),

	tasks: null,

	addTask: function() {
	sc_log('About to add a new task');
	var reply = prompt("Task Description", "New Task") ;
	Todos.store.createRecord(Todos.Task, {
	description: reply,
	isDone: false
	})
	}

	});

	Todos.Task = SC.Record.extend({
	isDone: SC.Record.attr(Boolean),
	description: SC.Record.attr(String)
	}) ;

	Todos.TaskListView = SC.Object.create({

	layerId: 'tasks',
	contentBinding: 'Todos.tasks',
	contentLengthBinding: '*content.length',

	contentLengthDidChange: function() {
	sc_log('updating list');
	this.updateList();
	}.observes('contentLength'), //'content', 'content.[]'

	updateList: function() {
	var content = this.get('content'),
	layerId = '#'+this.get('layerId'),
	layer = $(layerId),
	id, isDone, checked, newEle ;

	layer.empty();
	content.forEach(function(item, idx) {
	id = item.get('guid') ;
	isDone = item.get('isDone') ;
	checked = isDone ? " checked=checked " : ""
	newEle = "<li id='task-%@' id> <input type=checkbox %@ name='%@'> %@</li>"
	.fmt(idx, checked, 'isDone', item.get('description')) ;

	layer.append(newEle) ;
	newEle = $('#task-%@'.fmt(id)) ;

	if(isDone) {
	newEle.addClass('done') ;
	}
	}) ;
	$(layerId+' :checkbox').click(this.checkBoxClicked) ;

	},

	checkBoxClicked: function(event) {
	Todos.target = event.target ;
	var idx = $(event.target).parent().attr('id').split("-")[1],
	obj = Todos.get('tasks').objectAt(idx) ;
	// sc_log(obj.get('description')) ;
	obj.setIfChanged('isDone', !obj.get('isDone')); // Toggle The value.
	SC.RunLoop.invokeLast(Todos.TaskListView, 'updateList')
	}

	})

	function main() {
	sc_log('Running Main');
	Todos.store.checkout() ;

	var tasks = Todos.store.find(SC.Query.local(Todos.Task, {
	orderBy: 'isDone,description'
	})) ;
	Todos.set('tasks', tasks) ;

	// JQuery Code.
	$('#addTask').click(function(event) {
	hub.run(Todos.addTask, Todos) ;
	});

	setupPush(Todos.store);

	}
	</script>

	</head>
	<body id="demo">
	<h1 id="title">Todos</h1>

	<div id="button-bar">
	<input type="button" name="addTask" value="New Task" id="addTask">
	</div>

	<ul id="tasks">

	</ul>
	</body>
	</html>