1

我正在做一个小项目，我遇到了模型绑定问题。我正在使用 Backbone.ModelBinder 插件来绑定模型。

我正在检查输入的更改，并从输入数据名称字段中获取模型属性的名称。之后，我检查更改的数据并在模型上做一些事情。我有一个 ChangeGuest 函数，在里面我正在检查我的模型（Nyiltnap.Reg）的变化。

问题是，这个 Nyiltnap.Reg.on("change:"+field ...){ ... } 函数运行的次数与对名为 input 的字段所做的更改次数一样多。

也许我做错了什么，或者我错过了什么。

项目视图：

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>
4

0 回答 0