从Ul骨干中移除li

我试图建立一个非常简单的ul，你有一个输入框和添加按钮，点击添加按钮，输入的文本被附加到ul

这是我的代码：

HTML：

  Add 
 

JS：

 $(function(){ var myCollection = Backbone.Collection.extend(); var myView = Backbone.View.extend({ el:$('body'), tagName:'li', initialize : function(e){ this.collection.bind("add",this.render,this); }, events:{ 'click #add' : 'addfoo', 'click .button':'removefoo' }, addfoo:function(){ var myname= $('#name').val(); $('#name').val(''); console.log('name entered: '+myname); this.collection.add({name:myname}); }, removefoo:function(){ //need the code here }, render:function(){ $('#mylist').empty(); this.collection.each(function(model){ $('#mylist').append('
'+model.get('name') + ""+"delete"+"
"); }); } }); var view = new myView({collection: new myCollection()}); }); 

我的添加function正常工作，但是当我点击删除按钮时，应该删除集合中的哪个模型，iam卡在那里，请帮帮我。只需要代码，在removefoo函数中从集合中删除什么。

换句话说，如何在单击按钮时获取要删除的模型

谢谢

Answer 1

我认为你需要一种更模块化的Backbone方法，让我解释一下。

Backbone是一种组织代码的方法。 只有一个Backbone视图可以做到这一切，并没有太大的改变。

相反，尝试查看您实际需要的视图：

• 的MainView
• 列表显示
• ListItemView

MainView可能如下所示：

 var MainView = Backbone.View.extend({ el: 'body', initialize : function(options) { this.collection = new Backbone.Collection.extend({ url: '/items' }); }, events:{ }, render:function(){ var listView = new ListView({ el: this.$("#myList") }); listView.render(); this.collection.fetch(); return this; } }); 

ListView

 var ListView = Backbone.View.extend({ tagName: 'ul', initialize : function(options) { _.bindAll(this, "render"); this.collection.on("add", this.appendListItem, this); }, events:{ }, render: function() { this.collection.each(this.appendListItem, this); return this; }, appendListItem: function (model, collection, options) { var listItem = new ListItemView({ model: model}); this.$el.append(listItem.render().el); } }); 

ListItemView

 var ListItemView = Backbone.View.extend({ tagName: 'li', initialize : function(options) { _.bindAll(this, "render"); this.model.on("destroy", this.remove, this); }, events:{ "click button": "delete" }, render:function(){ this.$el.text(this.model.get('name')); this.$el.append("Delete"); return this; }, delete: function (event) { this.model.destroy(); } }); 

启动主视图： var view = new MainView().render();

Answer 2

当您在UI上呈现每个模型以了解哪个元素被删除时，必须为每个li元素分配唯一ID。

代替

 $('#mylist').append('
'+model.get('name') + ""+"delete"+"
"); 

你最好使用模板。 您可以使用下划线的模板 ，这将更容易分配ID并动态创建lis。

要删除模型：

 removefoo:function(evt){ var target = evt.target; //Parse the target id to get the model id and then delete it. } 

请参阅https://stackoverflow.com/questions/8782704/backbone-js-tutorial以了解主干的所有组件如何组合在一起。