php - Backbone.js model.destroy() 不发送删除请求

标签 php javascript ajax model backbone.js

几天来我一直在努力让这个工作正常,但我只是想不通为什么当我想销毁一个属于集合的模型时(它正确地具有用于开始获取模型数据的 url 属性), 仅触发销毁“事件”,该事件冒泡到集合中,以便通过我的 ListView 轻松绑定(bind)。但它根本不会向服务器发送实际的 DELETE 请求或任何请求。我到处看,我看到每个人都使用集合的 url attr,或者如果模型没有连接到集合,则使用 urlRoot。我什至在实际的 this.model.destroy() 之前进行了测试以检查模型 < console.log(this.model.url());

我没有覆盖 backbone 的 destroy 和 sync 方法。此外,每个模型都有一个 id 属性,该属性是通过集合的提取(从数据库记录)填充的。

销毁发生在列表项 View 中,集合的“销毁”事件绑定(bind)在 ListView 中。所有这些都运行良好(事件处理),但问题是没有对服务器的请求。

我希望 backbone.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);
    }

});

P.S...同样,这里有从其他地方引用的代码。但请注意:该集合确实有一个 url 属性集。它确实适用于初始获取以及为保存对模型所做的更改而触发的更改事件。但是列表项 View 中的 destroy 事件虽然成功触发了“destroy”事件,但它没有发送“DELETE”HTTP 请求。

最佳答案

Do your models have an ID? If not, the HTTP request won't be sent. – nikoshr May 14 at 18:03

非常感谢! Nikoshr 的小评论正是我所需要的。我花了最后 5 个小时来解决这个问题。我只需在模型中的默认值中添加一个 id。

关于php - Backbone.js model.destroy() 不发送删除请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10587897/

相关文章:

php - Gmail API PHP - 请求实体太大错误 413

jquery - Ajax自动保存功能

javascript - 如何在 ASP.NET MVC 应用程序中组织 JavaScript 代码

javascript - 谷歌云端硬盘 API : How do I list all files in a shared folder?

javascript - Google Maps API InfoWindow 中按钮的监听器以获取方向

php - 使用 Ajax 一次发送多个表单

php - 在 Laravel 4 中返回 Input::except() 多个输入

php - 如何在 mysql-php 中检索所有最后插入的行 ID?

php - YouTube 数据 API 调用 GET [URL] 时出错 : (500) Backend Error

javascript - React.js 状态项数组未正确更新甚至未显示任何错误