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

时间:2012-05-14 17:04:36

标签: php javascript ajax model backbone.js

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

我没有覆盖主干的破坏和同步方法。此外,每个模型都有一个id属性,该属性通过集合的fetch(来自数据库记录)填充。

销毁发生在列表项视图中,集合的“destroy”事件绑定在列表视图中。一切运作良好(事件处理),但问题是,没有对服务器的请求。

我希望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属性。它确实适用于初始提取以及为保存对模型所做的更改而触发的更改事件。但是list-item视图中的destroy事件虽然成功触发了“destroy”事件,但它不会发送'DELETE'HTTP请求。

1 个答案:

答案 0 :(得分:40)

  

你的模特有ID吗?如果不是,则不会发送HTTP请求。 -   nikoshr 5月14日18:03

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