2012-06-19 51 views
0

我有一個標準的列表視圖設置與骨幹,看起來像下面。我有一個實例,我需要刪除一個項目,這是在一個刪除函數中完成的,該函數銷燬該模型並釋放該元素。然而就在摧毀/不渲染之前,我想選擇列表中的前一個元素。Backbone獲取上一個/下一個項目的刪除?

有沒有一種很好的方式來做到這一點骨幹,現在我唯一能想到的就是用一些jQuery來做,但我想知道是否有辦法去prev/next內內部骨幹。或者當我追加列表項目時需要手動設置?

App = (function(Backbone, _){ 
    var Item = Backbone.Model.extend(
    { 
     defaults: 
     { 
      part1: 'hello', 
      part2: 'world' 
     } 
    }); 

    var ItemList = Backbone.Collection.extend({ 
     model: Item 
    }); 

    var ListRow = Backbone.View.extend(
    { 
     tagName: 'li', 

     initialize: function() 
     { 
      _.bindAll(this, 'render'); 
     }, 

     render: function() 
     { 
      $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>'); 

      return this; 
     }, 

     remove: function() 
     { 
      //toggle previous element if exists before destory 

      $this.model.destroy(); 
     }, 

     toggle: function() 
     { 
      this.$el.addClass('active');    
     } 
    }); 

    var ListView = Backbone.View.extend(
    { 
     el: $('#layout_content'), 

     events: 
     { 
      'click button#add': 'addItem' 
     }, 

     initialize: function() 
     { 
      _.bindAll(this, 'render', 'addItem', 'appendItem'); 

      this.collection = new TableList(); 
      this.collection.bind('add', this.appendItem); 

      this.counter = 0; 
      this.render(); 
     }, 

     render: function() 
     { 
      var self = this; 
      $(this.el).append("<button id='add'>Add list item</button>"); 

      $(this.el).append("<ul></ul>"); 

      _(this.collection.models).each(function(item){ // in case collection is not empty 
       self.appendItem(item); 
      }, this); 
     }, 

     addItem: function() 
     { 
      this.counter++; 

      var item = new Item(); 

      item.set({part2: item.get('part2') + this.counter}); 

      this.collection.add(item); 
     }, 

     appendItem: function(item) 
     { 
      var listRow = new ListRow({ 
       model: item 
      }); 

      $('ul', this.el).append(listRow.render().el); 
     } 
    }); 

    var app = function(initialModels) 
    { 
     this.start = function() 
     { 
      this.listView = new ListView({collection: new ItemList(initialModels)}); 
     }; 
    }; 

    return app; 
})(Backbone, _); 


var app = new App([{"id":"95","note_title":"can we find the title"},{"id":"93","note_title":"some title"}]); 
app.start(); 

+0

通過'選擇上一個項目列表',你的意思是以前的查看項目或模型 – Trevor

+0

上一個查看項目 – Rob

回答

0

似乎有骨幹裏面沒有直接的方法來做到這一點。我認爲你可以做的最好的方式是在Backbone中實現這一點,當你將它們添加到列表視圖並將這些實例存儲在列表視圖中時,給每個listrowview一個索引號。當銷燬剛剛去newindex = indexnumber +/- 1,然後顯示駐留在新索引中的視圖。

+0

雅,這是我最終做的,謝謝。 – Rob