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