- still trying to display users

labs/html5-embed/public/index.html

@@ -74,6 +74,7 @@
     </div>
     <div id="users">
       <h3>Users</h3>
+	  <ul id="users-list"></ul>
     </div>
     <div id="chat">
       <h3>Chat</h3>
@@ -101,5 +102,10 @@ <h3>Chat</h3>
     </ul>
   </div>
   <script src="js/chat/behaviour.js"></script>
+  <script type="text/template" id="item-template">
+    <li>
+      User 
+    </li>
+  </script>
 </body>
 </html>

labs/html5-embed/public/js/collections/users.js

@@ -13,7 +13,7 @@ define([
 	  });
 	  BBB.listen("UserJoinedEvent", function(bbbEvent) {
 		console.log("User [" + bbbEvent.userID + ", " + bbbEvent.userName + "] has joined.");
-		self.add({ userid: bbbEvent.userID, username: bbbEvent.userName});
+		self.add(new UserModel({ userid: bbbEvent.userID, username: bbbEvent.userName}));
 	  });
     }
   });

labs/html5-embed/public/js/router.js

@@ -4,12 +4,14 @@ define([
   'underscore',
   'backbone'
 ], function($, _, Backbone ){
+
   var AppRouter = Backbone.Router.extend({
     routes: {      
       // Default. We only have one route.
       '*actions': 'defaultAction'
     }
   });
+
   var initialize = function(){
     var app_router = new AppRouter;
     app_router.on('route:defaultAction', function (actions) {
@@ -27,7 +29,9 @@ define([
     });
     Backbone.history.start();
   };
+
   return { 
     initialize: initialize
   };
+
 });

labs/html5-embed/public/js/views/users/list.js

@@ -4,30 +4,28 @@ define([
   'underscore',
   'backbone',
   'collections/users', 
-  'text!templates/users/list.html'
-], function($, _, Backbone, UserCollection, userListTemplate){
-
-
-
-  var UsersView = Backbone.View.extend({	
-    el: $("#users"),
+  'views/users/user'
+], function($, _, Backbone, UserCollection, UserView){
+
+  var UsersView = Backbone.View.extend({
+	el: $("#users-list"),
     initialize: function(){	       
- //     UserCollection.add({ userid: "u1", username: "Richard"});
-  //    UserCollection.add({ userid: "u2", username: "Jesus"});
-  //    UserCollection.add({ userid: "u3", username: "Fred"});	  
-    },
-	exampleBind: function( model ){
-      console.log("Example Bind [" + model.get("userid") + ", " + model.get("username") + "]");
-	  this.render();
+      UserCollection.on('add', this.addUser, this);	  
     },
     render: function(){
 		console.log("*** Rendering Users View [" + UserCollection.length + "]");
       var data = {
         users: UserCollection.models
       };
-      var compiledTemplate = _.template( userListTemplate, data );
-      this.$el.html( compiledTemplate ); 
-    }
+//      var compiledTemplate = _.template( userListTemplate, data );
+//      this.$el.html( compiledTemplate ); 
+    },
+	addUser: function(user) {
+		console.log("Adding user [" + user.get("username") + "]");
+		var view = new UserView({model: user});
+		console.log("Rendering [" + view.render().el.html() + "]");
+		this.$el.append('<li>Hello</li>');
+	}
   });
 
   var usersView = new UsersView();

labs/html5-embed/public/js/views/users/user.js

@@ -0,0 +1,30 @@
+// Filename: views/users/user
+define([
+  'jquery',
+  'underscore',
+  'backbone',
+  'text!templates/users/user.html'
+], function($, _, Backbone, userTemplate){
+  var UserView = Backbone.View.extend({
+    tagName:  "li",
+
+    initialize: function() {
+      this.model.on('change', this.render, this);
+      this.model.on('destroy', this.remove, this);
+    },
+
+    render: function() {
+	  console.log("Render me! [" + this.model.get("username") + "]");
+	  var compiledTemplate = _.template(userTemplate, this.model);
+	  console.log("user is " + compiledTemplate);
+      this.$el.append(compiledTemplate);
+	  console.log(this.$el.append(compiledTemplate));
+      return this;
+	 //return compiledTemplate;
+    }
+
+  });
+
+  return UserView;
+
+});

labs/html5-embed/public/templates/users/user.html

@@ -0,0 +1 @@
+Hello world!