From 08df97e724d18493645b0243c71671ade174a430 Mon Sep 17 00:00:00 2001
From: Jollen Chen <jollen@moko365.com>
Date: Sun, 16 Nov 2014 11:18:42 +0800
Subject: [PATCH] implement #1

---
 public/index.js              | 33 ++++++++++++++++++++++++++++-----
 public/stylesheets/style.css | 21 +++++++++++++++++++++
 views/index.jade             | 12 ++++++------
 3 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/public/index.js b/public/index.js
index 5d3736d..6264f24 100644
--- a/public/index.js
+++ b/public/index.js
@@ -8,9 +8,8 @@ var app = app || {};
 **/
 app.Users = Backbone.Model.extend({
   url: function() {
-    return '/1/user/age' + this.filter;
+    return '/1/user';
   },
-  filter: '/30/39',
   defaults: {
     errors: [],
     errfor: {},
@@ -28,20 +27,44 @@ app.ListView = Backbone.View.extend({
     'click #btn-filter': 'click'
   },
   initialize: function() {
+    var self = this;
+
     this.model = new app.Users();
     this.listenTo(this.model, 'sync', this.render);
     this.listenTo(this.model, 'change', this.render);
-    this.model.fetch();
+    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;
+          return 0;
+        });
+      }
+    });
   },
   render: function() {
     this.$el.html(this.template( this.model.attributes ));
+
+    this.$el.find('[data-tag=user]').each(function () {
+      var me = $(this);
+      var age = '' + me.data('age');
+
+      me.addClass('age-' + age.slice(0, 1) + '0');
+    });
   },
   click: function(e) {
     var me = $(e.target);
     var filter = me.data('filter');
 
-    this.model.filter = filter;
-    this.model.fetch();
+    this.$el.find('[data-tag=user]').each(function () {
+      $(this).addClass('hide');
+    });
+
+    this.$el.find('.' + filter).each(function () {
+      $(this).removeClass('hide');
+    });
   }
 });
 
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 30e047d..6669b81 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -5,4 +5,25 @@ body {
 
 a {
   color: #00B7FF;
+}
+
+/**
+ * age range
+ */
+.age-20 {
+}
+
+.age-30 {
+}
+
+.age-40 {
+}
+
+.age-50 {
+}
+
+.age-60 {
+}
+
+.age-70 {
 }
\ No newline at end of file
diff --git a/views/index.jade b/views/index.jade
index 68e0eef..767e189 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -6,15 +6,15 @@ block content
 
   script(type='text/template', id='tmpl-user-list')
     .btn-group
-        button.btn.btn-primary#btn-filter(data-filter='/20/29') 20-29
-        button.btn.btn-primary#btn-filter(data-filter='/30/39') 30-39
-        button.btn.btn-primary#btn-filter(data-filter='/40/49') 40-49
-        button.btn.btn-primary#btn-filter(data-filter='/50/59') 50-59
-        button.btn.btn-primary#btn-filter(data-filter='/60/69') 60-69
+        button.btn.btn-primary#btn-filter(data-filter='age-20') 20-29
+        button.btn.btn-primary#btn-filter(data-filter='age-30') 30-39
+        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 <%= user.Name %> (Age: <%= user.Age %>)
+      li(data-tag='user', data-age!='<%= user.Age %>') <%= user.Name %> (Age: <%= user.Age %>)
       <% }); %>
 
   script(src='jquery/dist/jquery.min.js', type='text/javascript')