Question

我已经搜索了StackOverflow，其余的interwebz试图找到解决方案但没有成功。我正在学习Backbone，似乎无法解决这个问题。它完全适用于RESTful CRUD操作，只是在更新集合时（例如，如果有人发出POST请求将记录添加到数据库中），页面上没有任何更改。

据我所知，在model.save成功回调中，我不需要明确声明任何内容，因为根据Backbone的文档，它会自动更新模型所在的集合。为什么添加/编辑/删除时显示的页面上没有任何变化？ GAH！这是代码。

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
    <script type="text/template" id="search_template">
        <label>Search</label>
        <input type="text" id="search_input" />
        <input type="text" id="number" />
        <input type="button" id="search_button" value="Add" />
        <input type="button" id="edit_button" value="Edit" />
        <input type="button" id="delete_button" value="Delete" />
    </script>
    <script type="text/template" id="row_template">
        <tr>
            <td><%= id %></td>
            <td><%= name %></td>
            <td><%= job %></td>
        </tr>
    </script>
    <div id="view">

    </div>
    <table id="rows">
        <thead>
            <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Jobs</td>
            </tr>
        </thead>
        <tbody id="lmao">

        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <script>

        var lel = Backbone.Model.extend({ urlRoot: 'lol.php' });
        //var x = new lel;
        //var lee = Backbone.Mode.extend();

        var rows = Backbone.Collection.extend({ model: lel, url: 'lol.php' }); 

        dice = Backbone.View.extend({ 
            initialize: function(){ 
                this.render(); 
            },
            render: function(a){
               this.$el.html($('#search_template').html());
            }, 
            events: {
                'click input[value="Add"]': 'hay',
                'click #search_input': 'gaz',
                'click #edit_button': 'edit',
                'click #delete_button': 'del'
            },
            gaz: function(){ $('#search_input').val('') },
            hay: function(){ 
                var self = this;
                var x = new lel;
                x.save({ name: $('#search_input').val(), id: null }); 
            },
            edit: function(){
                var x = new lel;
                x.save({ name: $('#search_input').val(), id: $('#number').val() }, { success: function(r){ alert(r.toJSON()); } }); 
            },
            del: function(){
                var x = new lel({ id: $('#number').val() });
                x.destroy({ success: function(r){ console.log(r.toJSON()); } }); 
            }
        });

        var lmf = Backbone.View.extend({
            initialize: function(){
                _.bindAll(this, "render"); 
                this.collection = new rows();
                this.collection.on("change:all", function(){ alert('changed'); }, this);
                this.collection.fetch({ success: this.render }); 
                console.log(this.collection);
                console.log(this.model);
            },
            render: function(){
                var self = this;
                _.each(this.collection.models, function(item){
                    //console.log('row '+item);
                    var dict = item.toJSON();
                    var template = _.template($('#row_template').html())
                    var html = template(dict);
                    self.$el.append(html);
                });
            },
            addAll: function(){
                var self = this;
                self.$el.append('fafa');
                //this.$el.html(this.model.get('id'));
            }
        });

        //this.$el.html(self.collection.length);
        var throz = new dice({ el: $('#view') });
        var v = new lmf({ el: $('#lmao') });

    </script>
    </body>
</html>

服务器使用标准JSON数组响应（当调用.fetch（）时：

[{"id":"60","name":"r","job":""},{"id":"55","name":"r","job":""},{"id":"54","name":"s","job":""},{"id":"53","name":"r","job":""},{"id":"56","name":"ee","job":""},{"id":"57","name":"r","job":""},{"id":"58","name":"ffff","job":""},{"id":"59","name":"rrrrrr","job":""}]

请帮忙！这太令人沮丧了！

Answer 1

要扩展评论中提及的@mu is too short，您的观点并非在collection上搜索正确的事件。您应该收听被解雇的add或remove个事件。换句话说，设置监听器：

this.listen to(this.collection, "add", this.render);
this.listen to(this.collection, "add", this.render);

在你看来

。如果您想检测model中的更改，那么在您的childView中，您必须设置一个等待model更改的监听器，即

this.listen to(this.model, "change", this.render);

在这里，您只需render childView与model相关联，而不是整个集合。如果您要查找特定属性以更改侦听"change:attr"，其中attr是您要侦听的属性的名称。

保存或删除集合中的模型时，不会更新骨干视图

1 个答案: