From 20a5d059a9684dc171103394479973c5d6e9b6f0 Mon Sep 17 00:00:00 2001
From: Jollen Chen <jollen@moko365.com>
Date: Sat, 15 Nov 2014 14:41:16 +0800
Subject: [PATCH] implement filter and use data-*

---
 public/index.js  | 7 +++++--
 views/index.jade | 7 ++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/public/index.js b/public/index.js
index 9c9f847..5d3736d 100644
--- a/public/index.js
+++ b/public/index.js
@@ -36,8 +36,11 @@ app.ListView = Backbone.View.extend({
   render: function() {
     this.$el.html(this.template( this.model.attributes ));
   },
-  click: function() {
-    this.model.filter = '/40/49';
+  click: function(e) {
+    var me = $(e.target);
+    var filter = me.data('filter');
+
+    this.model.filter = filter;
     this.model.fetch();
   }
 });
diff --git a/views/index.jade b/views/index.jade
index 9dd623a..68e0eef 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -5,7 +5,12 @@ block content
   div#userList
 
   script(type='text/template', id='tmpl-user-list')
-    button.btn.btn-primary#btn-filter 40-49
+    .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
     h3 User List
     ul
       <% _.each(users, function(user) { %>