小さなプロジェクトに取り組んでいますが、モデル バインディングに問題があります。モデルをバインドするために 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>