私はバックボーンに非常に慣れていないため、ビューを切り替えるときに要素イベントのバインドを解除する方法を見つけるのに苦労しています。
これまでのところ、ビューをロードしてレンダリングするルーターがあります...
define([
"underscore",
"backbone"
], function (_, Backbone) {
"use strict";
var Router = Backbone.Router.extend({
"views": {},
"routes": {
"bugs": "listBugs",
"*other": "showDashboard"
},
"listBugs": function () {
var oRouter = this;
require([
"views/bugs/list"
], function (View) {
oRouter.views.bugsList = new View();
oRouter.views.bugsList.render();
});
},
"showDashboard": function () {
var oRouter = this;
require([
"views/dashboard"
], function (View) {
oRouter.views.dashboard = new View();
oRouter.views.dashboard.render();
});
}
});
return Router;
});
ダッシュボード ビューでイベントをいじっています...
/* views/dashboard */
define([
"underscore",
"backbone",
"text!templates/dashboard.html"
], function (_, Backbone, sTemplate) {
"use strict";
return Backbone.View.extend({
"el": "main",
"template": _.template(sTemplate),
"events": {
"click p": "testFunc"
},
"render": function() {
var sHtml;
sHtml = this.template();
this.$el.html(sHtml);
},
"testFunc": function () {
console.log("!");
}
});
});
問題は、/ と /bugs の間を数回クリックしてから ap タグをクリックすると、複数の行がコンソールに書き込まれ (ダッシュボード ビューが複数回作成されるため)、また、バグ ビュー 1 行がコンソールに書き込まれます。
ユーザーがダッシュボードから離れたときにそのクリック イベントのバインドを解除する最良の (そして最も簡単な) 方法は何ですか?
これがバグビューです。大したことはありません...
/* views/bugs/list */
define([
"underscore",
"backbone",
"text!templates/bugs/list.html"
], function (_, Backbone, sTemplate) {
"use strict";
return Backbone.View.extend({
"el": "main",
"template": _.template(sTemplate),
"render": function() {
var sHtml;
sHtml = this.template();
this.$el.html(sHtml);
}
});
});
誰かが興味を持っている場合の私の解決策
/* Router */
define([
"underscore",
"backbone"
], function (_, Backbone) {
"use strict";
var Router = Backbone.Router.extend({
"mainView": undefined,
"routes": {
"bugs": "listBugs",
"*other": "showDashboard"
},
"renderView": function (oView) {
if (typeof this.mainView !== "undefined") {
this.mainView.close();
}
this.mainView = oView;
this.mainView.render();
$("main").html(this.mainView.el);
},
"listBugs": function () {
var oRouter = this;
require([
"views/bugs/list"
], function (View) {
var oView = new View();
oRouter.renderView(oView);
});
},
"showDashboard": function () {
var oRouter = this;
require([
"views/dashboard"
], function (View) {
var oView = new View();
oRouter.renderView(oView);
});
}
});
return Router;
});
.
/* /views/dashboard */
define([
"underscore",
"backbone",
"text!templates/dashboard.html"
], function (_, Backbone, sTemplate) {
"use strict";
return Backbone.View.extend({
"tagName": "div",
"template": _.template(sTemplate),
"events": {
"click p": "testFunc"
},
"render": function() {
var sHtml;
sHtml = this.template();
this.$el.html(sHtml);
},
"testFunc": function () {
console.log("!");
}
});
});
.
/* /views/bugs/list */
define([
"underscore",
"backbone",
"text!templates/bugs/list.html"
], function (_, Backbone, sTemplate) {
"use strict";
return Backbone.View.extend({
"tagName": "div",
"template": _.template(sTemplate),
"render": function() {
var sHtml;
sHtml = this.template();
this.$el.html(sHtml);
}
});
});