主干添加从ULexception中删除
我开发了一个简单的应用程序来添加和删除ul中的名称。 我有一个输入和一个按钮，当我点击按钮时，输入中的文字被附加到ul.My代码是：
骨干代码：
$(function() { FriendList = Backbone.Collection.extend({ initialize: function(){ this.bind("add", function( model,options ){ var id = ( model.collection.indexOf(model) ); view.render(model,id); }); this.bind("remove",function(model){ alert("here"); }); } }); FriendView = Backbone.View.extend({ tagName: 'li', events: { 'click #add-input': 'getFriend', 'click .button': 'removeFriend' }, initialize: function() { this.friendslist = new FriendList; _.bindAll(this, 'render'); }, getFriend: function() { var friend_name = $('#input').val(); this.friendslist.add( {name: friend_name} ); }, removeFriend: function(){ var friend_index = $('.button').attr('id'); alert(friend_index); this.friendslist.remove(); }, render: function( model,id ) { $("#friends-list").append(""+ model.get("name")+""+" "); $('#input').val(''); } }); var view = new FriendView({el: 'body'}); });
我的问题，我被困在哪里：
i）添加function运行得很好，当我点击删除按钮时，它会转到removeFriendfunction，但不会转到收集和提醒（“这里”）; ii）请帮我编写删除/删除li的代码，点击删除按钮
谢谢
Backbone入门令人困惑。 我开始假设它可以在默认情况下做得更多。 相反，它是构建基础的构建块（参见主干木偶和类似项目）。 我已经在考虑这些事情的情况下重构了你的代码：
-
FriendView有太多的知识：它不应该知道将自己插入DOM的位置。 - 关于Backbone如何使用渲染集合进行了一些假设。 Backbone不实现集合渲染，因此它由您自己决定。 最简单的方法是渲染集合中的每个项目并将它们附加到DOM。 因此，当删除项目时，将再次呈现整个集合。 听起来很糟糕吧？ 在实践中，它可能无关紧要。 您可以实现更复杂的渲染方法，但我的建议是从基础开始并从那里开始工作。
- DOM应该反映Backbone的状态（集合，模型） – 您应该尽可能避免直接操作DOM，并允许Backbone状态更改/事件直接更新DOM。 您可以在删除朋友的过程中看到这一点：从集合中删除朋友，该朋友会触发绑定渲染
FriendListView的集合上的remove事件。
那么如何修复你的代码呢？ 这就是我做的： http ： //jsfiddle.net/Gd2Rs/
$(function() { FriendList = Backbone.Collection.extend(); FriendListView = Backbone.View.extend({ initialize: function(e, c) { this.collection.bind('add', this.render, this); this.collection.bind('remove', this.render, this); }, events: { 'click #add-input': 'addFriend' }, addFriend: function() { var friend_name = $('#input').val(); $('#input').val(''); this.collection.add({name: friend_name}); }, render: function() { var list = this.el.find('#friends-list'); list.empty(); this.collection.each(function(model) { var friendView = new FriendView({model: model}); list.append(friendView.render().el); }); } }); FriendView = Backbone.View.extend({ tagName: 'li', events: { 'click .button': 'removeFriend' }, removeFriend: function(){ this.model.collection.remove(this.model); }, render: function() { $(this.el).html(this.model.get('name') + ""); return this; } }); var view = new FriendListView({ el: $('#friends'), collection: new FriendList() }); });
请注意，我故意避免优化FriendListView.render因为我认为使用Backbone是错误的方法。 您将需要构建自己的集合渲染，您应该重用它或使用像主干木偶这样的东西。 使用Backbone的锅炉板代码直接变得令人厌烦。