erichocean · April 16, 2010 17:51
diff --git a/issues.html b/issues.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 Issues Tracker 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" src="issues.hub.js"></script>
    
    <script type="text/javascript" charset="utf-8">
      //
      // Application code
      //
      Issues.View = hub.Object.create({
        
        updateList: function() {
          var content = Issues.issues,
              layer   = $('#issues'),
              id, isDone, checked, newEle ;
          
          // Use jQuery to rebuild the list when the record array changes.
          layer.empty();
          content.forEach(function(item, idx) {
            id = item.get('guid') ;
            isDone = item.get('isDone') ;
            checked = isDone ? " checked=checked " : ""
            newEle = hub.fmt("<li id='issue-%@' id> <input type=checkbox %@ name='%@'> %@</li>",
              idx, checked, 'isDone', item.get('description')) ;
              
            layer.append(newEle) ;
            newEle = $(hub.fmt('#issue-%@', id)) ;
            
            if(isDone) {
              newEle.addClass('done') ;
            }
          });
          $('#issues :checkbox').click(this.checkBoxClicked) ;
          
        }.observes('Issues.issues.length'),
          // This allows us to respond to changes in the Issues.issues record 
          // array.
        
        checkBoxClicked: function(event) {
          Issues.target = event.target ;
          var idx = $(event.target).parent().attr('id').split("-")[1],
              obj = Issues.get('issues').objectAt(idx) ;
              
          // key-value conding is always part of the model layer API
          obj.setIfChanged('isDone', !obj.get('isDone')); // Toggle The value.
        }
        
      });
      
      // Get the app running (using jQuery).
      $(document).ready(function() {
        $('#add').click(function(event) {
          Issues.add() ; // call API in our model layer
        });
        
        // connect to CocoaHub
        Issues.store.packCommitted = function(version, pack) {
          // the JavaScript-Cocoa bridge requires this wrapper function
          CocoaHub.packCommitted(version, JSON.stringify(pack)) ;
        };
      });
    </script>
    
  </head>
  <body>
    <h1>Issues</h1>
    <div id="buttons">
      <input type="button" value="New Issue" id="add">
    </div>    
    <ul id="issues">
      
    </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 Issues Tracker 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" src="issues.hub.js"></script>

	<script type="text/javascript" charset="utf-8">
	//
	// Application code
	//
	Issues.View = hub.Object.create({

	updateList: function() {
	var content = Issues.issues,
	layer = $('#issues'),
	id, isDone, checked, newEle ;

	// Use jQuery to rebuild the list when the record array changes.
	layer.empty();
	content.forEach(function(item, idx) {
	id = item.get('guid') ;
	isDone = item.get('isDone') ;
	checked = isDone ? " checked=checked " : ""
	newEle = hub.fmt("<li id='issue-%@' id> <input type=checkbox %@ name='%@'> %@</li>",
	idx, checked, 'isDone', item.get('description')) ;

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

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

	}.observes('Issues.issues.length'),
	// This allows us to respond to changes in the Issues.issues record
	// array.

	checkBoxClicked: function(event) {
	Issues.target = event.target ;
	var idx = $(event.target).parent().attr('id').split("-")[1],
	obj = Issues.get('issues').objectAt(idx) ;

	// key-value conding is always part of the model layer API
	obj.setIfChanged('isDone', !obj.get('isDone')); // Toggle The value.
	}

	});

	// Get the app running (using jQuery).
	$(document).ready(function() {
	$('#add').click(function(event) {
	Issues.add() ; // call API in our model layer
	});

	// connect to CocoaHub
	Issues.store.packCommitted = function(version, pack) {
	// the JavaScript-Cocoa bridge requires this wrapper function
	CocoaHub.packCommitted(version, JSON.stringify(pack)) ;
	};
	});
	</script>

	</head>
	<body>
	<h1>Issues</h1>
	<div id="buttons">
	<input type="button" value="New Issue" id="add">
	</div>
	<ul id="issues">

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