私はバックボーン、バックボーンリレーショナル、およびスタックエクスチェンジを介した読み取りからWebアプリの構築について多くのことを学んでいます。最初に、コミュニティに感謝します。
今、私は、ネストされたモデルとサブビューに関連するこの現在の問題を理解しようとすることに固執しています。
このチュートリアルを拡張して、各ワインの「チェックイン」を追跡することにより、バックボーンリレーショナル、ビュー/サブビュー、およびイベント処理について学習しようとしています。
サーバー側を拡張して、次のようなチェックイン用の適切なJSONとバックボーンリレーショナルモデルを返しました。
window.CheckInModel = Backbone.RelationalModel.extend({
defaults:{
"_id":null,
"Did":"true",
"dateOf":"",
}
});
window.CheckInCollection = Backbone.Collection.extend({
model : CheckInModel
});
そして、そのようなワインモデル:
relations: [{
type: Backbone.HasMany,
key:'CheckIn',
relatedModel: 'CheckInModel',
collectionType: CheckInCollection,
}]
CheckInListViewとCheckInItemView(WineListViewとWineListItemViewと同じ)を作成し、WineViewRender関数を使用して次のようにCheckInをレンダリングしました。
render:function (eventName) {
console.log("wine View Render");
$(this.el).html(this.template(this.model.toJSON()));
this.myCheckInListView = new CheckInListView({model: this.model.attributes.CheckIn});
this.$el.append(this.myCheckInListView.render().el);
return this;
},
また、wineview内に、チェックインを作成し、特定のイベントに関連付ける新しい関数を作成しました。
logcheckin: function (event){
var todate = new Date();
newCheckIn = new CheckInModel ({'Did':"true", 'dateOf': todate.toISOString()});
console.log ("Logcheckin - About to push newCheckIn onto Model.");
this.model.attributes.CheckIn.push (newCheckIn);
console.log ("Just pushed newCheckIn onto Model.");
this.saveWine();
}
わかりました-まだTL/DRを実行していない場合-これはすべて、UIの観点からは正常に機能しているようです-つまり。すべてが正しくレンダリングされ、Dbに保存されます。
しかし、コンソールで、新しいチェックインを(上記のconsole.logsの間で)プッシュすると、チェックインリストビューの追加バインディングがwachボタンを押すと複数回呼び出されることに気付きます-これにより、ビューの実行方法に何か問題があると思いますイベントの伝播について基本的なことを理解していません。
なぜこうなった ?予想される動作ですか?私は正しくやろうとしていることに近づいていますか?
あなたの助けではないにしても読んでくれてありがとう。
==
add(およびその他の)イベントにバインドされているCheckinListViewおよびCheckInListItemビューの関連部分は次のとおりです。
window.CheckInListView = Backbone.View.extend({
initialize:function () {
this.model.bind("reset", this.render, this);
this.model.bind("change", this.render, this);
var self = this;
this.model.bind("add", function (CheckIn) {
console.log ("Adding to CheckInListView - a CheckIn List Item", CheckIn);
self.$el.append(new CheckInListItemView({model:CheckIn}).render().el);
});
},
close:function () {
$(this.el).unbind();
$(this.el).remove();
}
});
window.CheckInListItemView = Backbone.View.extend({
initialize:function () {
this.model.bind("change", this.render, this);
this.model.bind("destroy", this.close, this);
},
});
==============================================
イベントのバインドとビューの終了に関するコメントは、これをデバッグするための正しいヒントでした。
1)ネストされたビューを適切に閉じてバインドを解除していなかったため、DOMに何も存在していなくても、ゴーストイベントのコンシューマーが残っていました。
2)サブビューでのみ何かを実行したい場合にのみ、イベントをバインドする必要があります。
例-サブビューにチェックボックスがある場合、メインビューにはモデルがあるので、メインビューでサブビュー変更イベントをバインドし、そこでイベントを処理できます。これが「正しい」方法かどうかはわかりませんが、私がしなければならないことにはうまくいきます。(mm ..スパゲッティコードはとてもおいしいです)
3)これに苦労することで、UXについてもう少し考え、UIを簡素化することができました。
4)JSON呼び出しですべてのデータをネストすることにより、サーバーへの呼び出しを「保存」しようとしていました。そして、これをやり直すとしたら、データをネストするのではなく、ワインIDをチェックインIDに関連付けて、タスクが選択されるとコレクションが読み込まれる別のコレクションを作成することで、バックエンドでデータを処理します。 -これは好ましい方法ではないと思いましたが、多くの人がそうしているようです。
上記の「正しい」方法の質問についての考えや、「シンプルなバックボーンアプリ」を超えたチュートリアルを誰かが指摘できる場合は、引き続き歓迎します。