implement #2

app.js

@@ -74,6 +74,7 @@ app.get('/post', require('./routes/index').post);
 // REST API
 app.post('/1/user', api.create);
 app.get('/1/user', api.read);
+app.get('/1/user/:id', api.readOneByUserId);
 app.put('/1/user/:nickname', api.update);
 app.delete('/1/user/:nickname', api.delete);
 

public/index.js

@@ -17,14 +17,27 @@ app.Users = Backbone.Model.extend({
   }
 });
 
+app.UserInfo = Backbone.Model.extend({
+  url: function() {
+    return '/1/user/' + this.attributes.id;
+  },
+  id: '',
+  defaults: {
+    errors: [],
+    errfor: {},
+    user: {}
+  }
+});
+
 /**
 * VIEWS
 **/
 app.ListView = Backbone.View.extend({
 	el: '#userList',
   template: _.template( $('#tmpl-user-list').html() ),
   events: {
-    'click #btn-filter': 'click'
+    'click #btn-filter': 'click',
+    'click [data-tag=user]': 'listUser'
   },
   initialize: function() {
     var self = this;
@@ -35,7 +48,7 @@ app.ListView = Backbone.View.extend({
     this.model.fetch({
       success: function() {
         var users = self.model.get('users');
-        
+
         users.sort(function (a, b) {
           if (a.Age > b.Age) return 1;
           else if (a.Age < b.Age) return -1;
@@ -65,6 +78,28 @@ app.ListView = Backbone.View.extend({
     this.$el.find('.' + filter).each(function () {
       $(this).removeClass('hide');
     });
+  },
+  listUser: function(e) {
+    var id = $(e.target).data('user-id');
+    app.userView.model.set('id', id);
+    app.userView.model.fetch();
+  }
+});
+
+app.UserView = Backbone.View.extend({
+  el: '#userInfo',
+  template: _.template( $('#tmpl-user-info').html() ),
+  events: {
+  },
+  initialize: function() {
+    var self = this;
+
+    this.model = new app.UserInfo();
+    this.listenTo(this.model, 'sync', this.render);
+    this.listenTo(this.model, 'change', this.render);
+  },
+  render: function() {
+    this.$el.html(this.template( this.model.attributes ));
   }
 });
 
@@ -73,4 +108,5 @@ app.ListView = Backbone.View.extend({
 **/
 $(document).ready(function() {
   app.listView = new app.ListView();
+  app.userView = new app.UserView();
 });

routes/api.js

@@ -19,8 +19,31 @@ exports.read = function(req, res){
 	var model = req.app.db.model.User;
 
 	var vcard = model.find({}, function(err, vcard) {
+		var users = [];
+
+		vcard.forEach(function (user) {
+			users.push({
+				_id: user._id,
+				Name: user.Name,
+				Age: user.Age
+			});
+		});
+
+		res.send({
+			users: users
+		});
+
+		res.end();
+	});
+};
+
+exports.readOneByUserId = function(req, res){
+	var model = req.app.db.model.User;
+	var id = req.params.id;
+
+	var vcard = model.findOne({_id: id}, function(err, user) {
 		res.send({
-			users: vcard
+			user: user
 		});
 		res.end();
 	});

views/index.jade

@@ -1,8 +1,14 @@
 extends layout
 
 block content
-  h1= title
-  div#userList
+  .row
+    .col-md-6.col-sm-6
+      h2 User List
+      div#userList
+    .col-md-6.col-sm-6
+      h2 User Info
+      hr
+      div#userInfo
 
   script(type='text/template', id='tmpl-user-list')
     .btn-group
@@ -11,12 +17,21 @@ block content
         button.btn.btn-primary#btn-filter(data-filter='age-40') 40-49
         button.btn.btn-primary#btn-filter(data-filter='age-50') 50-59
         button.btn.btn-primary#btn-filter(data-filter='age-60') 60-69
-    h3 User List
     ul
       <% _.each(users, function(user) { %>
-      li(data-tag='user', data-age!='<%= user.Age %>') <%= user.Name %> (Age: <%= user.Age %>)
+      li
+        a(href='#', data-user-id!='<%= user._id %>', data-tag='user', data-age!='<%= user.Age %>') <%= user.Name %> (Age: <%= user.Age %>)
       <% }); %>
 
+  script(type='text/template', id='tmpl-user-info')
+    h2 <%= user.Name %>
+    div.well
+      p Phone: <%= user.Phone %>
+      p Email: <%= user.Email %>
+      p Address: <%= user.Address %>
+      p Age: <%= user.Age %>
+      p ID: <%= user._id %>
+
   script(src='jquery/dist/jquery.min.js', type='text/javascript')
   script(src='underscore/underscore-min.js', type='text/javascript')
   script(src='backbone/backbone.js', type='text/javascript')