Backbonejs 事件发生多次 [英] Backbonejs event occurring multiple times

问题描述

我有一个在网格中显示项目的视图.如果单击创建新行的按钮，则会显示一个弹出窗口(使用 SimpleModal)以允许用户将该行保存到服务器.如果一切顺利，窗口将关闭并刷新网格.到目前为止一切正常.如果我现在第二次打开窗口，保存记录事件将被调用两次.如果我第三次关闭并打开窗口，那么该事件将被调用三次，依此类推.我不知道为什么该事件多次反弹.这是我的两个观点:

I have a view that displays items in a grid. If a button to create a new row is clicked, a popup window (use SimpleModal) is displayed to allow the user to save the row to the server. If all goes well, the window closes and the grid is refreshed. All works fine up to this point. If I now open the window a second time, the save record event will get called two times. If I close and open the window a third time, then the event will be called three times, etc. I have no idea why the event is getting rebound multiple times. Here are my two views:

字段列表视图:

var fieldListView = Backbone.View.extend({
el: "#centerbodycontent",
initialize: function () {
    _.bindAll(this, 'render', 'addField');
},

render: function () {
    $(this.el).empty();
    $("#FieldGridTemplate").tmpl({ results: this.model }).appendTo(this.el)
    stripe($(this.el).find("tbody"));
    return this;
},
events: {
    "click a#addfield": "addField"
},
addField: function (e) {
    window.appController.popup = new fieldFormView({ model: new fieldModel({ contenttype_id: this.model.id }) });
    window.appController.popup.render();
}

});

表单视图(这是弹出窗口的调用)

Form View (this is what gets called for the popup)

var fieldFormView = Backbone.View.extend({
el: "#popupwindowcontent",

events: {
    "click #savefieldandnew": "savefield",
    "click #savefieldandclose": "savefield",
    "change input,textarea,select": "changeField"
},
render: function () {
    var formWrapper = $(this.el).find(".modal-form")[0];
    $(formWrapper).empty();
    $("#FieldFormTemplate").tmpl({ results: this.model }).appendTo(formWrapper)
    OpenForm(this.el, "Add Field", 450, 600);
    return this;
},
// automatically updates the model during field changes
changeField: function (e) {
    var changeobj = new Object;
    switch (e.target.type) {
        case "radio":
            changeobj[e.target.id] = parseInt($(e.target).val());
            break;
        case "checkbox":
            changeobj[e.target.id] = $(e.target).is(":checked");
            break;
        default:
            changeobj[e.target.id] = $(e.target).val();
            break;
    }

    if (e.target.id.toLowerCase() == "name") {
        var k = $(this.el).find("#key");
        if (jQuery.trim(k.val()).length == 0)
            k.val($(e.target).val().replace(/[^a-zA-Z0-9]+/g, '').toLowerCase());

        var l = $(this.el).find("#label");
        if (jQuery.trim(l.val()).length == 0)
            l.val($(e.target).val());
    }

    var options = { silent: true };
    this.model.set(changeobj, options);
},
savefield: function (e) {
    var kcode = (e.which);
    var thiz = this;
    var m = this.model;
    var nextaction = e.target.id;
    alert(nextaction);
    if (kcode == 0 || kcode == 1 || kcode == 32) {
        e.preventDefault();
        if ($("#contentfieldform").validate({
            rules: {
                name: { required: true },
                label: { required: true },
                key: { required: true }
            }
        }).form()) {
            m.save(null, {
                headers: { "If-Match": m.get("version") },
                error: function (model, response) {
                    var errResp = JSON.parse(response.responseText);
                    popupException("Content Type Modification Error", errResp.errors[0].message);
                },
                success: function (model, response) {
                    window.appController.popup.model = new fieldModel;
                    $.pnotify({
                        pnotify_title: 'Field Saved',
                        pnotify_text: 'The field was saved successfully.'
                    });

                    if (nextaction == "savefieldandclose") {
                        $.modal.close();
                    }
                }
            });
        }
    }
}

推荐答案

由于没有人回答，我想我会添加更多信息，以防有人遇到这个问题.解释正在发生的事情(并提供通用解决方案)的一个很好的资源是 http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/.此外，最新版本的主干有一些新的方法来允许从视图中注销事件.

Since nobody answered I thought I would add some more info in case anyone runs into this. A good resource to explain what is happening (and offer a generic solution) is http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/. Also, the latest version of backbone has some new methods to allow unregistering of events from views.

这篇关于Backbonejs 事件发生多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！