MS DC template picker override

public/javascripts/app/pages/framer.js

@@ -8,24 +8,33 @@ app.pages.Framer = app.views.Base.extend({
   },
 
   subviews : {
-    ".post-view" : "postView"
+    ".post-view" : "postView",
+    ".template-picker" : "templatePicker"
   },
 
   initialize : function(){
     this.model = app.frame
 
-    var templateType = "status"
+    this.model.bind("change", this.render, this)
+    this.templatePicker = new app.views.TemplatePicker({ model: this.model })
+  },
 
-    this.model.authorIsNotCurrentUser = function(){ return false }
+  postView : function(){
+    //we might be leaky like cray cray with this
 
-    this.postView = new app.views.Post({
+    var templateType = this.model.get("templateName")
+
+    var postView = new app.views.Post({
       model : this.model,
       className : templateType + " post loaded",
       templateName : "post-viewer/content/" + templateType,
       attributes : {"data-template" : templateType}
     });
 
-    this.postView.feedbackView = new Backbone.View
+    postView.feedbackView = new Backbone.View
+    this.model.authorIsNotCurrentUser = function(){ return false }
+
+    return postView
   },
 
   saveFrame : function(){

public/javascripts/app/templates/template-picker.handlebars

@@ -0,0 +1,5 @@
+<select name="template">
+    {{#each templates}}
+        <option value="{{.}}">{{.}}</option>
+    {{/each}}
+</select>

public/javascripts/app/views/template_picker_view.js

@@ -0,0 +1,33 @@
+app.views.TemplatePicker = app.views.Base.extend({
+  templateName : "template-picker",
+
+  initialize : function(){
+    this.model.set({templateName : 'status'})
+  },
+
+  events : {
+    "change select" : "setModelTemplate"
+  },
+
+  postRenderTemplate : function(){
+    this.$("select[name=template]").val(this.model.get("templateName"))
+  },
+
+  setModelTemplate : function(evt){
+    this.model.set({"templateName": this.$("select[name=template]").val()})
+  },
+
+  presenter : function() {
+    return _.extend(this.defaultPresenter(), {
+      templates : [
+        "status-with-photo-backdrop",
+        "note",
+        "rich-media",
+        "multi-photo",
+        "photo-backdrop",
+        "activity-streams-photo",
+        "status"
+      ]
+    })
+  }
+})

spec/javascripts/app/pages/framer_spec.js

@@ -5,6 +5,14 @@ describe("app.pages.Framer", function(){
     this.page = new app.pages.Framer();
   });
 
+  it("passes the model down to the template picker", function(){
+    expect(this.page.templatePicker.model).toBe(app.frame)
+  });
+
+  it("passes the model down to the post view", function(){
+    expect(this.page.postView.model).toBe(app.frame)
+  });
+
   describe("rendering", function(){
     beforeEach(function(){
       this.page.render();

spec/javascripts/app/views/template_picker_view_spec.js

@@ -0,0 +1,28 @@
+describe("app.views.TemplatePicker", function(){
+  beforeEach(function(){
+    this.model = factory.statusMessage({templateName: undefined})
+    this.view = new app.views.TemplatePicker({model : this.model })
+  })
+
+  describe("initialization", function(){
+    it("sets the post_type of the model to 'status' by default", function(){
+      expect(this.view.model.get("templateName")).toBe("status")
+    })
+  })
+
+  describe("rendering", function(){
+    beforeEach(function(){
+      this.view.render()
+    })
+
+    it("selects the model's templateName from the dropdown", function(){
+      expect(this.view.$("select[name=template]").val()).toBe("status")
+    })
+
+    it("changes the templateName on the model when is is selected", function(){
+      this.view.$("select[name=template]").val("note")
+      this.view.$("select[name=template]").trigger("change")
+      expect(this.model.get("templateName")).toBe('note')
+    })
+  })
+})