javascript - 如何在 Backbone ListView 中追加项目

Question

我是 Backbone 的新手，并且一直在调整主干入门以与我的其余 api 一起使用。除了我无法找出将新添加的项目附加到 ListView 的最佳方法之外，一切都运行良好。这是我的 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>

这是我的主干脚本:

                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();

所以我认为主要问题是当我获取所有资源时，我会在响应中获得一个资源 ID。我就是用这个资源 ID 来删除单个资源的。这工作正常。 但是，当我创建新资源时，我得到的只是服务器成功 200 响应，因此资源已创建，但我无法将另一行追加到 ListView 中。 如果有人可以提出解决方案或替代方法，那么这将是一个救星。

干杯

Answer 1

编辑您的收藏夹 View 以在添加到收藏夹时显示该项目。

附加到初始化:

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

添加功能

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