Question

这里有很多事情发生，所以我会尝试在简短和完全描述之间划清界线。

总体目标：我正在创建一个与Parse.com NoSQL / MongoDB数据库连接的准系统（无CSS）管理面板，使用HTML表单和Backbone.js来控制通信并将用户输入的信息保存到Parse中数据库。除了客户端的一些基本内容之外，我没有执行任何验证。

背景：对于一个特定的任务，我正在做两件事：1）在“页面加载”中从Parse.com的数据库中抓取信息（在页面加载时不完全正确，但我不确定如何正确渲染视图而不做这个 - 当用户选择“添加购买”选项时，会生成addPurchase视图，并且我使用0值提交表单一次以查询数据库并将结果附加到屏幕 - 我认为这可能导致问题）并使用jQuery将信息呈现给HTML页面。 2）然后，我要求用户选择4个选项中的一个，提交后我将其记录为交易，并在Parse.com的“购买日志”表中生成一个条目。

问题：视图呈现成功，并且已成功从数据库中检索值并将其放在页面上。但是，当用户提交指示他们选择哪个选项的表单时，生成的事务记录将以某个函数“n”的速率存储在数据库中，其中n是事务记录已保存的次数。本届会议。如果我刷新视图，'n'重置。在不刷新页面的情况下保存的次数越多，保存的重复条目就越多。

我是BackboneJS，Parse.com和MV *框架的新手。所以我绝对认为我的代码可以使用一些清理，而且我也觉得我错过了关于Backbone / HTML表单/ Views / DOM如何工作的关键信息。所以我提前为任何草率的代码道歉;我对你的任何清理建议都很满意= P。

我的代码：有很多地方可能出现问题，我会尽量保持简洁。

在HTML中，我有一组单选按钮，允许用户决定他们想要执行的操作。根据选择的按钮，不同的表单将呈现给浏览器。提交表单后，Parse会尝试将值保存在数据库中，并在成功保存后，使用提示保存成功的警报回调浏览器，然后调用新的AdminPanelView（）。

其他操作也发生了多次保存的问题，但我通过在保存功能之后立即添加以下两行来解决问题：

this.undelegateEvents();
delete this;

但是，当我在addPurchase函数中的查询成功块中执行此操作时，我收到控制台错误，告诉我undelegateEvents（）不是'this'的函数，并且调试器告诉我'this'已分配在进行此调用时到窗口。

如果我尝试将相同的两行移动到查询函数之后，似乎根本没有任何东西被保存。视图只是立即切换回新的AdminPanelView，而不保存。

行为也会根据我在addPurchase函数中放置'return false'语句的位置而改变，但我无法确切地知道返回的内容是什么，而且我刚刚玩过傻瓜与他们没有真正理解代码中发生的事情。

请帮我弄清楚我在这里做错了什么！我觉得我在这里误解了一个核心概念，所以我很想知道它是什么，并了解更多关于Backbone和Parse的工作原理。

表单的行为受某些Backbone代码的控制：

var AdminPanelView = Parse.View.extend({
  events: {
    "click form.manageOperations": "manageOperations",
    "submit form#newPurchaseInfo": "addPurchase",
    //other stuff too
  },
    el: ".content",
initialize: function(){
    this.render();
    _.bindAll(this, "manageOperations", "addPurchase");
    this.manageOperations();
},

render: function(){
  this.$el.html(_.template($("#admin_panel_template").html()))
  this.delegateEvents();  
},

manageOperations: function() 
{
    this.$(".inputInfo").hide();
    var v = this.$("input[name=defineOperation]:checked").val();

    if (v=="add-purchase") { this.$("#newPurchaseInfo").show(); 
                            this.$("#newPurchaseInfo").submit();}
    else if //cases for the other options - normally I just 
        call this.$("#new[Whatever]Info.show();
},
addPurchase: function() {

    var Perk = Parse.Object.extend("Perk");
    var query = new Parse.Query(Perk);

    query.find({
        success: function(results) 
        {
            var i = 1;
            for (var r in results) 
            {
                this.$("#perk"+i+"co").html(results[r].get("company"));
                this.$("#perk"+i+"desc").html(results[r].get("description"));
                i++;
            }
            var purchase = Number(this.$("#newPurchaseInfo .perkChoice").val());

            // I think this line may be causing the issue. 
            if (purchase!=0)
            {
                alert("you indicated you want to use perk # " + purchase +", "
                + "which indicates " + results[purchase-1].get("description")
                + " from " + results[purchase-1].get("company"));

                var Purchase = Parse.Object.extend("PurchaseLog");
                var purchaseEntry = new Purchase();

                user = Parse.User.current();

                purchaseEntry.save(
                {
                    info        : info,
                }, {
                    success: function(purchase) 
                    {
                        alert("purchase saved successfully");
                        new AdminPanelView();
                        return false;
                    },
                    error: function(purchase, error) 
                    {
                        alert("purchase NOT saved: code " + error.code + ", " + error.message);
                    }
                });
            }

        return false;
        },
        error: function(error) 
        {
            alert("error code " + error.code + ": " + error.message);
        }
    });
    // this.undelegateEvents();
    // delete this;
    return false;
},

为什么我的客户端保存功能会多次触发？

0 个答案: