Backbonejs:在视图中渲染的模型,但在集合中不存在

Backbonejs: model rendered in view but dont exist in collection

本文关键字:集合 不存在 模型 视图 Backbonejs      更新时间:2023-09-26

我只是不知道是什么导致了问题,需要帮助。在发布之前,我已经提出了另一种解决方案,但我想了解为什么这不能正常工作。

我有一个初始化视图的路由器,它初始化实体集合和视图,如下所示:

advertiser_manage_campaign: function () {
    this.campaignListView = new window.CampaignListView;
    this.mainSidebar = new window.MainSidebar;
},

活动列表视图:

window.CampaignListView = Backbone.View.extend({
    el: ("#right_column"),
    initialize: function () {   
        this.render();
        this.campaignCollection = new Campaign.CampaignCollection;
        this.campaignCollectionView = new Campaign.CampaignCollectionView({ model: this.campaignCollection });
        this.campaignCollection.fetch();
    },
    events: {
        "click .campaign_dialog": "openCampaignDialog"
    },
    openCampaignDialog: function (e) {        
        var that = this;
        var itemID = $(e.target).attr("item-id");
        var model = {}; //model to populate dialog inputs
        if (!isNaN(itemID))
            model = this.campaignCollection.get(itemID).toJSON(); //get existing model from collection <- after described procedure, error
        Campaign.Dialog.open(model, function (data) {
            if (isNaN(itemID)) {//model does not exist, create
            that.campaignCollection.create(data, { wait: true,
                    error: function (model, error) {
                        dialoger.showErrors(JSON.parse(error.responseText).errors);
                    },
                    success: function (mdl, response) { window.Campaign.Dialog.close(); }
                });               
            } else {//model exist, update
                model = that.campaignCollection.get(itemID);
                model.save(data, { wait: true,
                    error: function (mdl, error) {
                        dialoger.showErrors(JSON.parse(error.responseText).errors);
                    },
                    success: function (mdl, response) { window.Campaign.Dialog.close(); }
                });
            }
        });
        return false;
    },
    render: function () { 
        $(this.el).html(window.Templates.getHTML("campaign_list_view", {}));
        $(".button", $(this.el)).button();
    }
});

-

openCampaignDialog 

用于编辑模型和创建新模型。模型的每个视图(表行)有一个类为".ccampaign_dialog"的按钮,还有一个添加同类新模型的按钮。

Campaign.Dialog.open

显示用模型填充的对话框,并在回调中从对话框窗体返回JSON。

如果我通过对话框创建新模型,我可以立即编辑它,但当我创建新模型时,更改视图,返回到此视图,再次创建新模型、更改视图,然后再次返回,在最后添加的项目上单击编辑,我在评论行上收到错误,因为具有此ID的模型不在集合中,尽管它在集合中。服务器的响应是可以的。显然,我做错了什么,一天后,我不知道是什么。

我提出的另一个解决方案是从模型视图的事件创建和填充对话框(这很有效),但我认为CampaingCollectionView或CampaingView不应该处理添加或编辑模型的问题,所以我在"更高"视图中实现了这一点。

感谢大家帮助我…

编辑:

var CampaignCollectionView = Backbone.View.extend({
    el: (".content_table tbody"),
    initialize: function () {
        this.model.bind("reset", this.render, this);
        this.model.bind("add", this.add, this);
    },
    render: function () {
        $(this.el).empty();
        _.each(this.model.models, function (campaign) {
            $(this.el).append(new CampaignView({ model: campaign }).render().el);
        }, this);
        return this;
    },
    add: function (model) {
        window.Appender.AppendAndScroll($(new CampaignView({ model: model }).render().el), this.el);
    }
});

我找到了解决方案。

然而,当我们通过以下方式将对象绑定在一起时,就会出现问题事件,但我们并不麻烦解除它们的绑定。只要这些物体绑定在一起,并且在我们的应用程序代码中引用了at至少有一个,它们不会被清理或垃圾收集。这个由此产生的内存泄漏就像电影中的僵尸一样&隐藏在黑暗的角落,等着跳出来吃午饭。

来源:http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

作者提出了解除绑定机制,但若存在,我将重用相同的对象。

路由器:

advertiser_manage_campaign: function () {
    if (!this.campaignListView)
        this.campaignListView = new window.CampaignListView;
    else
        this.campaignListView.initialize();

    this.mainSidebar = new window.MainSidebar;
},

若有人认为这不是最好的解决方案,我想听听原因。

感谢所有试图提供帮助的人!