Backbone.js 为什么木偶项目视图中的主干模型更改函数会多次触发更改事件函数?

Backbone.js 为什么木偶项目视图中的主干模型更改函数会多次触发更改事件函数?,backbone.js,requirejs,marionette,modelbinder,Backbone.js,Requirejs,Marionette,Modelbinder,我在做一个小项目,我有一个模型绑定的问题。我正在使用Backbone.ModelBinder插件绑定模型 我正在检查输入的更改,并从输入数据名称字段中获取模型属性的名称。之后,我检查更改后的数据,并在模型上执行一些操作。我有一个function ChangeGuest,里面我正在检查我的模型的Nyiltnap.Reg更改 问题是,这个Nyiltnap.Reg.onchange:+field…{…}函数运行的次数与对名为input的字段所做的更改的次数相同 也许我做错了什么,或者我错过了什么 项目

我在做一个小项目,我有一个模型绑定的问题。我正在使用Backbone.ModelBinder插件绑定模型

我正在检查输入的更改,并从输入数据名称字段中获取模型属性的名称。之后,我检查更改后的数据,并在模型上执行一些操作。我有一个function ChangeGuest,里面我正在检查我的模型的Nyiltnap.Reg更改

问题是,这个Nyiltnap.Reg.onchange:+field…{…}函数运行的次数与对名为input的字段所做的更改的次数相同

也许我做错了什么,或者我错过了什么

项目视图:

模板:


我只是用木偶,没有活页夹。我认为木偶网已经内置了这个功能,因为它会自动将我的模型和视图与一些代码绑定在一起。如果我听Reg.onall,function{console.loge};然后我可以看到模型只更改了一次更改:在更改时控制台中只显示一次字段。当我调用ChangeGuest函数Reg.on执行过去的所有更改时,问题似乎就出现了。但也许我错了。
define(['text!templates/FormCompositeView.html', 'text!templates/EventIsFull.html', 'text!templates/ThankYou.html', 'models/RegModel'], function(Template, FullTemplate, ThankYou, Model) {
   var FormCompositeView = Backbone.Marionette.ItemView.extend({
        _modelBinder:undefined,
        initialize: function() {
            this.members = parseInt(Nyiltnap.Reg.get("members"));
            this._modelBinder = new Backbone.ModelBinder();

            var that = this;
            Nyiltnap.Reg.on("change:name", function(r) { //HERE CHANGE TRIGGERS ONLY ONCE
                if( ! _.has(r._previousAttributes, "name") ){
                    that.IncreaseMembers();
                    if(that.members < 10) that.$('.guest').attr("disabled", false);
                    if(that.$('#email').val() != '') that.$("#send-button").attr("disabled", false);
                }
                if( _.has(r._previousAttributes, "name") && r.changed.name == "" ){
                    that.DecreaseMembers();
                    Nyiltnap.Reg.unset("name");
                    that.$('.guest').attr("disabled", true);
                    that.$("#send-button").attr("disabled", true);
                }
            });

            Nyiltnap.Reg.on("change:email", function(r) {
                if( ! _.has(r._previousAttributes, "email") ){
                    if(that.$('#name').val() != '') that.$("#send-button").attr("disabled", false);
                }
                if( _.has(r._previousAttributes, "email") && r.changed.email == "" ){
                    that.$("#send-button").attr("disabled", true);
                }
            });
        },
        getTemplate: function() {
            if( this.members < 10 ){
                return _.template(Template);
            }else{
                return _.template(FullTemplate);
            }
        },
        tagName: "ul",
        id: "nyiltnap-form",
        onRender: function() {
            var MainBindings = {name : "[name=rname]", email : "#email", source : "#source", coupon : "#coupon", guest_1 : "#guest-1", guest_2 : "#guest-2", guest_3 : "#guest-3", guest_4 : "#guest-4", guest_5 : "#guest-5", guest_6 : "#guest-6", guest_7 : "#guest-7", guest_8 : "#guest-8", guest_9 : "#guest-9"};

            if(this.members < 10) this._modelBinder.bind(Nyiltnap.Reg, this.el, MainBindings);

            return this;
        },
        events: {
            "change .guest" : "ChangeGuest",
            "click #send-button" : "SendReg"
        },
        ChangeGuest: function(o) { //I WOULD LIKE TO MAKE THIS WORK
            var that = this;
            var field = $(o.target).data('name');
            Nyiltnap.Reg.on("change:"+field, function(r) { //THIS RUNS AS MANY TIMES AS THE CONTENT OF THE 'field' HAS BEEN CHANGED
                if( ! _.has(r._previousAttributes, field) ) {
                    that.IncreaseMembers();
                    that.AddInput(o);
                }else{
                    if(_.has(r._previousAttributes, field) && _.result(r.changed, field) == ""){
                        that.DecreaseMembers();
                    }
                }
            });
        },
        IncreaseMembers: function() {
            this.members++;
            Nyiltnap.Reg.set("members", this.members);
            Nyiltnap.vent.trigger("members:changed", this.members);
        },
        DecreaseMembers: function() {
            this.members--;
            Nyiltnap.Reg.set("members", this.members);
            Nyiltnap.vent.trigger("members:changed", this.members);
        }, 
        AddInput : function(o) {
            var target = $(o.target);            
            if(this.members < 9) target.next().next().slideDown();
        }
   });

   return FormCompositeView;
});
<li>
    <label for="guest1">My guests: </label>
    <div id="guests">
        <input name="guest-1" data-name="guest_1" id="guest-1" class="guest" type="text" disabled="disabled"/>
        <input name="guest-2" data-name="guest_2" id="guest-2" class="guest" type="text" disabled="disabled"/>
        <input name="guest-3" data-name="guest_3" id="guest-3" class="guest" style="display: none" type="text" />
        <input name="guest-4" data-name="guest_4" id="guest-4" class="guest" style="display: none" type="text" />
        <input name="guest-5" data-name="guest_5" id="guest-5" class="guest" style="display: none" type="text" />
        <input name="guest-6" data-name="guest_6" id="guest-6" class="guest" style="display: none" type="text" />
        <input name="guest-7" data-name="guest_7" id="guest-7" class="guest" style="display: none" type="text" />
        <input name="guest-8" data-name="guest_8" id="guest-8" class="guest" style="display: none" type="text" />
        <input name="guest-9" data-name="guest_9" id="guest-9" class="guest" style="display: none" type="text" />
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</li>