Add createItemView method

fkotsian · Jun 5, 2014 · 711d52c · 711d52c
1 parent efff0b2
commit 711d52c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 27 deletions.
diff --git a/app/assets/javascripts/asana.js b/app/assets/javascripts/asana.js
@@ -24,7 +24,8 @@ Backbone.CompositeView = Backbone.View.extend({
     } else {
       this.subviews(selector).push(subview);
     }
-      this.attachSubview(selector, subview.render());
+
+    this.attachSubview(selector, subview.render());
   },
 
   attachSubview: function (selector, subview) {

diff --git a/app/assets/javascripts/views/container.js b/app/assets/javascripts/views/container.js
@@ -26,17 +26,11 @@ Asana.Views.Container = Backbone.CompositeView.extend({
     var listPane = new Asana.Views.ListShow({
       model: defaultList
     });  // this should be all owned_tasks eventually, but for now it's just lists.first()
-    var defaultItem = new Asana.Models.Item();
-    var itemPane = new Asana.Views.ItemShow({
-      model: defaultItem
-     });
 
     this.removeSubviews('#projects-pane');
     this.removeSubviews('#list-pane');
-    this.removeSubviews('#item-pane');
     this.addSubview('#projects-pane', projectsPane.render());
     this.addSubview('#list-pane', listPane.render());
-    this.addSubview('#item-pane', itemPane.render());
   },
 
   renderInProjectPane: function(event) {},

diff --git a/app/assets/javascripts/views/lists/show.js b/app/assets/javascripts/views/lists/show.js
@@ -1,5 +1,25 @@
 Asana.Views.ListShow = Backbone.CompositeView.extend({
   template: JST['lists/list'],
+  events: {
+    'click .editable': 'insertEdit',
+    'blur h3.postable, p.postable': 'updateList',
+    'submit h3.postable, p.postable': 'updateList',
+    'submit td.postable': 'attachNewList',
+    // 'click p.postable': 'clear',
+    'click .renderable-item': 'renderInItemPane',
+    'keydown input': 'navigateUpOrDown',
+  },
+
+  className: 'list',
+  render: function () {
+    console.log('rendering')
+    var renderedContent = this.template({ list: this.model });
+    this.$el.html(renderedContent);
+    this.attachSubviews();
+
+    return this;
+  },
+
   initialize: function () {
     var that = this;
     var items = this.collection = this.model.items();
@@ -18,33 +38,16 @@ Asana.Views.ListShow = Backbone.CompositeView.extend({
       });
       this.addItemView(blankItem);
     }
+
+    var defaultItem = items.first();
+    this.createItemPane(defaultItem);
 
     this.listenTo(this.model, 'sync change:title change:description', this.render);
     this.listenTo(this.collection, "addNewItem", this.handleNewItem);
     // this.listenTo(items, 'sort', this.render);
 
   },
 
-  events: {
-    'click .editable': 'insertEdit',
-    'blur h3.postable, p.postable': 'updateList',
-    'submit h3.postable, p.postable': 'updateList',
-    'submit td.postable': 'attachNewList',
-    // 'click p.postable': 'clear',
-    'click .renderable-item': 'renderInItemPane',
-    'keydown input': 'navigateUpOrDown',
-  },
-
-  className: 'list',
-  render: function () {
-    console.log('rendering')
-    var renderedContent = this.template({ list: this.model });
-    this.$el.html(renderedContent);
-    this.attachSubviews();
-
-    return this;
-  },
-
   insertEdit: function(event) {
     $editable = $(event.target);
     switch ($editable.prop('tagName')) {
@@ -157,6 +160,14 @@ Asana.Views.ListShow = Backbone.CompositeView.extend({
       newRow.find('.editable').click();
     }, 500);
   },
+
+  createItemPane: function(item) {
+    var itemView = new Asana.Views.ItemShow({
+      model:   item,
+      project: this.model.project_id,
+    });
+    this.addSubview('#item-pane', itemView);
+  },
 
   renderInItemPane: function(event) {
     var $renderable = $(event.target.parentElement);

diff --git a/app/assets/templates/lists/list.jst.ejs b/app/assets/templates/lists/list.jst.ejs
@@ -19,4 +19,7 @@
     <tbody>
     </tbody>
   </table>
+</div>
+
+<div id='item-pane'>
 </div>
diff --git a/app/assets/templates/projects/index.jst.ejs b/app/assets/templates/projects/index.jst.ejs
@@ -7,9 +7,11 @@
   </div>
 </div>
 <ul id='projects'></ul>
+
 <div id="new-project">
   <button class='new-project'>New Project button needs love</button>
 </div>
+
 <div id='user-account center'>
   <a href='users/sign_out' class='btn btn-default', data-method='delete'>Sign Out</a>
 </div>