Backbone add remove from UL anomaly

Question

Iam developing a simple application to add and remove names from a ul. I have a input and a button , when i click button , text in input is appended to ul.My code is :

<input type="text" placeholder="Enter friend's name" id="input" />
<button id="add-input">Add Friend</button>

<ul id="friends-list">
</ul>

Backbone Code :

<script>
    $(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("<li>"+ model.get("name")+"<button class=button id="+id+">"+"delete"+"</button>"+"</li>");

                $('#input').val('');

            }

        });

        var view = new FriendView({el: 'body'});
    });
</script>

My problems , where iam stuck :

i) Add functionality is running just fine , when i click delete button , it goes to removeFriend function but does not goto the collection and alert ("here"); ii) Please Help me write code for deleting/removing an li on clicking delete button

Thank you

Answer 1

Getting started with Backbone is confusing. I started with the assumption that it could do more than it can by default. Instead, it is a building block to build upon (see backbone marionette and similar projects). I've refactored your code a bit with these things in mind:

1. FriendView has too much knowledge: it shouldn't have to know where to insert itself into the DOM.
2. Some assumptions are made about how Backbone works with rendering collections. Backbone doesn't implement collection rendering so it is left up to you. The easiest way is render each item in the collection and append them to the DOM. So when an item is removed, the entire collection is rendered again. Sounds bad, right? In practice it may not matter. You can implement more complex rendering approaches but my advice is to start with the basics and work from there.
3. The DOM should reflect the state of Backbone (collections, models) -- you should avoid manipulating the DOM directly as much as possible and allow Backbone state changes/events to direct updating the DOM. You can see this in how removing a friend is done: remove the friend from the collection which triggers a remove event on the collection which is bound to rendering the FriendListView.

So how to fix your code? This is what I did: 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') + "<button class='button'>"+"delete"+"</button>");
            return this;
        }
    });

    var view = new FriendListView({
        el: $('#friends'),
        collection: new FriendList()
    });
});​

Note that I've intentionally avoided optimizing FriendListView.render because I think it's the wrong way to go with Backbone. You're going to either need to build your own collection rendering which you should reuse or use something like backbone marionette. The boiler plate code using Backbone directly gets tiresome.