select one aspect

public/javascripts/app/templates/aspects-dropdown.handlebars

@@ -1,4 +1,3 @@
-
 <div class="btn-group aspects_dropdown check-group">
     <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
         <span class="text"></span> <span class="caret"></span>
@@ -6,15 +5,14 @@
     <ul class="dropdown-menu">
         <li><a href="#" class="public" data-visibility="public">Public</a></li>
         <li><a href="#" class="all-aspects" data-visibility="all-aspects">All Aspects</a></li>
-        <!--<li class="divider"></li>-->
-        <!--<li><a href="#" data-value="custom">Custom</a></li>-->
+
+        <li class="divider"></li>
+        {{#each current_user.aspects}}
+            <li><a href="#" data-aspect-id="{{id}}"  data-visibility="custom">{{name}}</a></li>
+        {{/each}}
+
     </ul>
 </div>
 
 <input type="hidden" class="aspect_ids"/>
 
-<!--<select multiple=multiple>-->
-    <!--{{#each current_user.aspects}}-->
-        <!--<option value="{{id}}"> {{name}}</option>-->
-    <!--{{/each}}-->
-<!--</select>-->

public/javascripts/app/views/aspects_dropdown_view.js

@@ -12,7 +12,8 @@ app.views.AspectsDropdown = app.views.Base.extend({
     var link = $(evt.target)
       , visibilityCallbacks = {
           'public' : setPublic,
-          'all-aspects' : setPrivate
+          'all-aspects' : setPrivate,
+          'custom' : setCustom
         }
 
     visibilityCallbacks[link.data("visibility") || "all-aspects"].call(this)
@@ -26,6 +27,11 @@ app.views.AspectsDropdown = app.views.Base.extend({
       this.setAspectIds("all_aspects")
       this.setDropdownText(link.text())
     }
+
+    function setCustom (){
+      this.setAspectIds(link.data("aspect-id"))
+      this.setDropdownText(link.text())
+    }
   },
 
   setDropdownText : function(text){

spec/javascripts/app/views/aspects_dropdown_view_spec.js

@@ -1,5 +1,13 @@
 describe("app.views.AspectsDropdown", function(){
   beforeEach(function(){
+    loginAs(factory.user({
+      aspects : [
+        { id : 3, name : "sauce" },
+        { id : 5, name : "conf" },
+        { id : 7, name : "lovers" }
+      ]
+    }))
+
     this.view = new app.views.AspectsDropdown
   })
 
@@ -40,5 +48,20 @@ describe("app.views.AspectsDropdown", function(){
         expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("All Aspects")
       })
     })
+
+
+    describe("selecting An Aspect", function(){
+      beforeEach(function(){
+        this.view.$("a:contains('lovers')").click()
+      })
+
+      it("calls set aspect_ids to to the aspect id", function(){
+        expect(this.view.$("input.aspect_ids").val()).toBe("7")
+      })
+
+      it("sets the dropdown title to the aspect title", function(){
+        expect($.trim(this.view.$(".dropdown-toggle .text").text())).toBe("lovers")
+      })
+    })
   })
 })

spec/javascripts/helpers/factory.js

@@ -33,6 +33,10 @@ factory = {
     return new app.models.Comment(_.extend(defaultAttrs, overrides))
   },
 
+  user : function(overrides) {
+    return new app.models.User(factory.userAttrs(overrides))
+  },
+
   userAttrs : function(overrides){
     var id = this.id.next()
     var defaultAttrs = {