How to append an item in Backbone listview

Question

I am new to Backbone, and have been adapting the backbone primer for use with my rest api. Everything works well except for that I cannot figure out the best way to append a newly added item to my list view. Here is my html:

                <div id="subscriberApp" class="row">
                <div class="col-md-6">
                    <h2>Subscribers List</h2>

                    <table class="table">
                        <thead>
                            <tr>
                                <th>Login</th>
                                <th>Uri</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody class="subscribers-list"></tbody>
                    </table>

                </div>
                <div class="col-md-3">
                    <div>
                        <h2>Add a Subscriber</h2>
                        <p><label for="id_login">Login:</label> <input class="form-control" id="id_login" maxlength="100" name="login" style="display:block" type="text" /></p>
                        <p><label for="id_password">Password:</label> <input class="form-control" id="id_password" maxlength="100" name="password" style="display:block" type="text" /></p>
                        <p><label for="id_realm">Realm:</label> <input class="form-control" id="id_realm" maxlength="100" name="realm" style="display:block" type="text" /></p>
                        <p><label for="id_ip_address">Ip address:</label> <input class="form-control" id="id_ip_address" maxlength="100" name="ip_address" style="display:block" type="text" /></p>
                        <button class="btn btn-success create">Create</button>
                    </div>  
                </div>
            </div>
            <script type="text/template" id="subscribers-tmpl">
                <td><span class="login"><%= login %></span></td>
                <td><span class="uri"></span></td>
                <td><button class="btn btn-warning edit-subscriber">Edit</button> <button class="btn btn-danger remove">Delete</button></td>
            </script>
            <script src="/static/subscribers/underscore.js"></script>
            <script src="/static/subscribers/backbone.js"></script>
            <script src="/static/subscribers/script.js"></script>

And here is my backbone script:

                var subscribers_model = Backbone.Model.extend({
              defaults: {
                id: null,  
                login: null,
                password: null,
                realm: null,
                hotspot_ip: null,
              }
            });

            var subscribers_collection = Backbone.Collection.extend({
                url: 'http://example.net/subscribers',
                model: subscribers_model,
                parse: function(data) {
                    return data;
                }   
            });

            var SubscriberView = Backbone.View.extend({
                tagName: 'tr',
                template: _.template($('#subscribers-tmpl').html()),
                initialize: function() {
                    this.listenTo(this.model, 'destroy', this.remove)
                },

                render: function() {
                    var html = this.template(this.model.toJSON());
                    this.$el.html(html);
                    return this;
                },

                events: {
                    'click .remove': 'onRemove'
                },

                onRemove: function() {
                    this.model.destroy();
                }    
            });

            var SubscribersView = Backbone.View.extend({
                el: '#subscriberApp',
                initialize: function() {
                    this.listenTo(this.collection, 'sync', this.render);
                },
                render: function() {
                    var $list = this.$('.subscribers-list').empty();    
                    this.collection.each(function(model) {
                      var item = new SubscriberView({model:model});
                        var uri = item.model.attributes.uri
                        item.model.attributes.id =  uri.replace('/subscribers/', '');
                        $list.append(item.render().el);
                    }, this);

                    return this;
                },
                events: {
                    'click .create': 'onCreate'
                },

                onCreate: function() {
                    var self = this;
                    var $login = this.$('#id_login');
                    var $password = this.$('#id_password');
                    var $realm = this.$('#id_realm');
                    var $ip = this.$('#id_ip_address');

                    this.collection.create({
                        login: $login.val(),
                        password: $password.val(),
                        realm: $realm.val(),
                        hotspot_ip: $ip.val()
                    });


                    login: $login.val('');
                    password: $password.val('');
                    realm: $realm.val('');
                    hotspot_ip: $ip.val('');


                }   
            });

            var subscribers = new subscribers_collection();
            var SubsView = new SubscribersView({collection: subscribers});
            subscribers.fetch();

So I think that the main issue is that when I fetch my all my resources, I am given a resource id foreach in the response. It is this resource id that I use to delete an individual resource. This works correctly. However, when I create a new resource all I get back is a server success 200 response, so the resource is created, but I cannot append another row to my listview. If anyone could suggest a solution or an alternative approach, then that'd be a lifesaver.

Cheers

Answer 1

Edit your collection view to display the item when added to collection.

Append to initialize:

this.listenTo(this.collection, 'add', this.on_item_add);

Add function

on_item_add:function(added_item){
   var added_item_row = new SubscriberView({model: added_item});
   $(".subscribers-list").append(added_item_row.render().el);
},