我有一個標準的列表視圖設置與骨幹,看起來像下面。我有一個實例,我需要刪除一個項目,這是在一個刪除函數中完成的,該函數銷燬該模型並釋放該元素。然而就在摧毀/不渲染之前,我想選擇列表中的前一個元素。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();
通過'選擇上一個項目列表',你的意思是以前的查看項目或模型 – Trevor
上一個查看項目 – Rob