Backbone.js model.destroy() 不发送 DELETE 请求


Backbone.js model.destroy() not sending DELETE request

我已经尝试了好几天来让它工作,我只是想不通为什么当我有我的视图来销毁属于集合的模型(它正确地有一个 url 属性用于开始获取模型数据(,只触发销毁"事件",该事件冒泡到集合中以便由我的列表视图轻松绑定。 但它根本不会向服务器发送实际的 DELETE 请求或任何请求。 无论我在哪里看,我都看到每个人都使用集合的 url attr,或者如果模型未连接到集合,则使用 urlRoot。 我什至在实际的 this.model.destroy(( 之前测试过<console.log(this.model.url(((检查模型;>

我没有覆盖主干网的销毁或同步方法。 此外,每个模型都有一个 id 属性,该属性通过集合的获取(从数据库记录(填充。

销毁

发生在列表项视图中,集合的"销毁"事件绑定在列表视图中。 所有这些都运行良好(事件处理(,但问题再次是没有对服务器的请求。

我希望骨干.js会自动做到这一点。 这就是文档所暗示的,以及无处不在的众多示例。

非常感谢任何可以提供一些有用意见的人。

仅供参考:我正在 wampserver PHP 5.3.4 上开发。

ListItemView = BaseView.extend({
    tagName: "li",
    className: "shipment",
    initialize: function (options) {
        _.bindAll(this);
        this.template = listItemTemplate;   
        this.templateEmpty = listItemTemplateEmpty;
    },  
    events: {
        'click .itemTag' : 'toggleData',
        'click select option' : 'chkShipper',
        'click .update' : 'update',
        'click button.delete' : 'removeItem'
    },  
    // ....
    removeItem: function() {
        debug.log('remove model');
        var id = this.model.id;
        debug.log(this.model.url());
        var options = {
            success: function(model, response) {
                debug.log('remove success');
                //debug.log(model);
                debug.log(response);
                // this.unbind();
                // this.remove();
            },
            error: function(model, response) {
                debug.log('remove error');
                debug.log(response);
            }
        };
        this.model.destroy(options);

        //model.trigger('destroy', this.model, this.model.collection, options);

    }
});

Collection = Backbone.Collection.extend({
    model: Model,
    url: '?dispatch=get&src=shipments',
    url_put : '?dispatch=set&src=shipments',
    name: 'Shipments',  
    initialize: function () {
        _.bindAll(this);
        this.deferred = new $.Deferred();
        /*
        this.fetch({
            success: this.fetchSuccess,
            error: this.fetchError
        });
        */
    },
    fetchSuccess: function (collection, response) {
        collection.deferred.resolve();
        debug.log(response);
    },
    fetchError: function (collection, response) {
        collection.deferred.reject();
        debug.log(response);
        throw new Error(this.name + " fetch failed");
    },
    save: function() {
        var that = this;
        var proxy = _.extend( new Backbone.Model(),
        {
            url: this.url_put,
            toJSON: function() {
                return that.toJSON();
            }
        });
        var newJSON = proxy.toJSON()
        proxy.save(
            newJSON,
            {
                success: that.saveSuccess,
                error: that.saveError
            }
        );
    },
    saveSuccess: function(model, response) {
        debug.log('Save successful');
    },
    saveError: function(model, response) {
        var responseText = response.responseText;
        throw new Error(this.name + " save failed");
    },
    updateModels: function(newData) {
        //this.reset(newData);
    }
});

ListView = BaseView.extend({
    tagName: "ul",
    className: "shipments adminList",
    _viewPointers: {},
    initialize: function() {
        _.bindAll(this);
        var that = this;
        this.collection;
        this.collection = new collections.ShipmentModel();
        this.collection.bind("add", this.addOne);
        this.collection.fetch({
            success: this.collection.fetchSuccess,
            error: this.collection.fetchError
        });

        this.collection.bind("change", this.save);
        this.collection.bind("add", this.addOne);
        //this.collection.bind("remove", this.removeModel);
        this.collection.bind("destroy", this.removeModel);
        this.collection.bind("reset", this.render);
        this.collection.deferred.done(function() {
            //that.render();
            that.options.container.removeClass('hide');
        });             
        debug.log('view pointers');
        // debug.log(this._viewPointers['c31']);
        // debug.log(this._viewPointers[0]);
    },
    events: {
    },
    save: function() {
        debug.log('shipments changed');
        //this.collection.save();
        var that = this;
        var proxy = _.extend( new Backbone.Model(),
        {
            url: that.collection.url_put,
            toJSON: function() {
                return that.collection.toJSON();
            }
        });
        var newJSON = proxy.toJSON()
        proxy.save(
            newJSON,
            {
                success: that.saveSuccess,
                error: that.saveError
            }
        );
    },
    saveSuccess: function(model, response) {
        debug.log('Save successful');
    },
    saveError: function(model, response) {
        var responseText = response.responseText;
        throw new Error(this.name + " save failed");
    },
    addOne: function(model) {
        debug.log('added one');
        this.renderItem(model);
        /*
        var view = new SB.Views.TicketSummary({
            model: model
        });
        this._viewPointers[model.cid] = view;
        */
    },
    removeModel: function(model, response) {
        // debug.log(model);
        // debug.log('shipment removed from collection');
        // remove from server
        debug.info('Removing view for ' + model.cid);
        debug.info(this._viewPointers[model.cid]);
        // this._viewPointers[model.cid].unbind();
        // this._viewPointers[model.cid].remove();
        debug.info('item removed');
        //this.render();
    },
    add: function() {
        var nullModel = new this.collection.model({
            "poNum" : null,
            "shipper" : null,
            "proNum" : null,
            "link" : null
        });
        // var tmpl = emptyItemTmpl;
        // debug.log(tmpl);
        // this.$el.prepend(tmpl);
        this.collection.unshift(nullModel);
        this.renderInputItem(nullModel);                
    },
    render: function () {
        this.$el.html('');
        debug.log('list view render');
        var i, len = this.collection.length;
        for (i=0; i < len; i++) {
            this.renderItem(this.collection.models[i]);
        };
        $(this.container).find(this.className).remove();
        this.$el.prependTo(this.options.container);
        return this;
    },          
    renderItem: function (model) {
        var item = new listItemView({
            "model": model
        });
        // item.bind('removeItem', this.removeModel);
        // this._viewPointers[model.cid] = item;
        this._viewPointers[model.cid] = item;
        debug.log(this._viewPointers[model.cid]);
        item.render().$el.appendTo(this.$el);
    },
    renderInputItem: function(model) {
        var item = new listItemView({
            "model": model
        });
        item.renderEmpty().$el.prependTo(this.$el);
    }
});

附言...同样,也有从其他地方引用的代码。 但请注意:该集合确实设置了 url 属性。 它确实适用于初始获取以及触发更改事件以保存对模型所做的更改时。 但是列表项视图中的销毁事件虽然成功触发了"销毁"事件,但它不会发送"DELETE"HTTP 请求。

您的模特有 ID 吗?如果没有,则不会发送HTTP请求。 尼科什尔 五月 14 在 18:03

非常感谢!尼科什尔的小评论正是我所需要的。我花了最后 5 个小时搞砸这个。我只需要在模型中的默认值中添加一个 id。