[英]Multiple modals being added in Backbone
I am opening the modal from the DetailsView 我从DetailsView打开模态
as follows: 如下:
var $ = jQuery = require('jquery'),
Backbone = require('backbone'),
Handlebars = require('handlebars'),
_ = require('underscore'),
skuDetailsTemplate = require("../../templates/sku/SkuDetails.html"),
skuDetailsModel = require('../../models/sku/SkuDetailsModel'),
updateSkuModel = require('../../models/sku/UpdateSkuModel'),
skuUpdateView = require('../../views/sku/UpdateSkuView'),
inventoryForFacilityModel = require('../../models/inventory/InventoryForFacilityModel'),
skuListingModel = require('../../models/sku/listing/SkuListingModel');
var SkuDetailsView = Backbone.View.extend({
el: ".sku-details-container",
tagName: "div",
initialize: function (options) {
var self = this;
this.skuDetailsModel = new skuDetailsModel();
this.inventoryForFacilityModel = new inventoryForFacilityModel();
this.skuListingModel = new skuListingModel();
this.listenTo(self.skuDetailsModel, 'add', self.render);
this.listenTo(self.skuDetailsModel, 'change', self.render);
this.listenTo(self.inventoryForFacilityModel, 'add', self.render);
this.listenTo(self.inventoryForFacilityModel, 'change', self.render);
this.listenTo(self.skuListingModel, 'add', self.render);
this.listenTo(self.skuListingModel, 'change', self.render);
this.sku_id = options.sku_id;
this.skuDetailsModel.set("id", this.sku_id);
this.skuDetailsModel.fetch({});
this.inventoryForFacilityModel.set("id", this.sku_id);
this.inventoryForFacilityModel.fetch({})
this.skuListingModel.set("id", this.sku_id);
this.skuListingModel.fetch({})
},
events: {
"click .openModal": "openUpdateModal",
"click .btnEditSku": "openUpdateModal"
},
openUpdateModal: function (ev) {
var data = { model: this.skuDetailsModel };
var modalView = new skuUpdateView(data);
modalView.show();
},
render: function () {
var self = this;
this.$el.html(skuDetailsTemplate({
skuDetails: self.skuDetailsModel.toJSON(),
inventoryByFacility: self.inventoryForFacilityModel.toJSON(),
skuListing: self.skuListingModel.toJSON()
}));
}
});
module.exports = SkuDetailsView;
ModalView ModalView
var UpdateSkuView = Backbone.View.extend({
className: "modal fade",
attributes: {
tabindex: "-1",
role: "dialog",
},
initialize: function (options) {
var self = this;
this.model = options.model;
this.updateSkuModel = new updateSkuModel();
this.template = skuUpdateTemplate;
},
events: {
"click .save": "saveHandler",
"click .closeModal": "close",
"change .clsEdit": "recordModelChange"
},
recordModelChange: function (e) {
var field = e.target.id;
var value = e.target.value;
var res = this.model.toJSON();
var obj = {};
// if (field === "length" || field === "width" || field === "height" || field === "weight" || field === "mrp" || field === "recommended_selling_price") {
// value = parseFloat(value);
// }
obj[field] = value;
obj["id"] = res.records[0].id;
//var res = this.model.toJSON();
this.updateSkuModel.set(obj, { validate: true });
},
saveHandler: function (e) {
//Save logic
var self = this;
e.preventDefault();
var options = {
validate: true,
success: function (model, response) {
self.showSuccessMessage("SKU with id " + response.records[0].id + " updated successfully");
setTimeout(function () {
self.close();
}, 1500);
}
};
this.updateSkuModel.save({}, options);
},
render: function () {
var self = this;
this.$el.html(this.template({
skuDetails: self.model.toJSON()
})).modal()
return this;
},
show: function () {
$(document.body).append(this.render().el);
},
close: function () {
this.$el.remove(".modal fade");
this.$el.modal("hide");
this.$el.empty();
this.undelegateEvents();
}
});
module.exports = UpdateSkuView;
If i open one modal and then close it and then open another instance of the modal it comes over the previous one. 如果我打开一个模态然后关闭它然后打开模态的另一个实例它会超过前一个模态。
Please help. 请帮忙。
My problem: 我的问题:
Vini, your modal view never calls remove http://backbonejs.org/#View-remove either from parent view or from itself. Vini,你的模态视图从不调用从父视图或从它自身删除http://backbonejs.org/#View-remove 。
Modals are pain to keep track of. 模态很难追踪。 Exactly for that reason I used Rendering bootstrap modal using backbone
正是因为这个原因,我使用了使用骨干的Rendering bootstrap模式
Despite all that! 尽管如此! Look at the events you have.
看看你有的事件。 You re-render your parent view with out cleaning up the bindings or removing subsequent views.
您重新渲染父视图,而不清除绑定或删除后续视图。
this.listenTo(self.skuDetailsModel, 'add', self.render);
this.listenTo(self.skuDetailsModel, 'change', self.render);
this.listenTo(self.inventoryForFacilityModel, 'add', self.render);
this.listenTo(self.inventoryForFacilityModel, 'change', self.render);
this.listenTo(self.skuListingModel, 'add', self.render);
this.listenTo(self.skuListingModel, 'change', self.render);
I sense that this.listenTo(self.skuListingModel, 'change', self.render);
我感觉到这个
this.listenTo(self.skuListingModel, 'change', self.render);
binds 'click event' every time you re-render / update your "sku" Remove it and see it works. 每次重新渲染/更新“sku”时绑定“点击事件”删除它并查看它是否有效。
I use a modalManager class that extend the Backbone.View for use to show modal views. 我使用一个modalManager类来扩展Backbone.View以用于显示模态视图。 I think your problem is on the close function, you need to hide the modal and then remove it like my hide funtion.
我认为你的问题是关闭函数,你需要隐藏模态,然后像我的隐藏功能一样删除它。
modalManager = Backbone.View.extend({
className: "modal",
template: 'modals/modal.html',
title: '',
content: '',
showButton: true,
events: {
'click .close': 'hide',
'click .btn': 'hide'
},
initialize: function (options) {
_.extend(this, _.pick(options, "title"));
_.extend(this, _.pick(options, "content"));
this.render();
},
show: function () {
this.$el.modal('show');
},
hide: function () {
this.$el.modal('hide');
this.remove();
},
render: function () {
this.$el.html(this.template({title: this.title, content: this.content, showButton: this.showButton}));
},
setTitle: function(title) {
this.title=title;
this.render();
},
setContent: function(content) {
this.content=content;
this.render();
},
setShowButton: function(showbutton) {
this.showButton=showbutton;
this.render();
}
})
Your close-method must be altered: 你的近距离方法必须改变:
close: function () {
this.undelegateEvents();
this.$el.remove();
this.remove();
}
Since you are always creating a new modal the old one is unnecessary (garbage) 由于你总是在创建一个新的模态,旧的模态是不必要的(垃圾)
You create a modal instance here: 您在此处创建一个模态实例:
var modalView = new skuUpdateView(data);
and here you open it. 在这里你打开它。
modalView.show();
Modal view can not be garbage collected because it is referenced form another view. 模态视图不能被垃圾收集,因为它是从另一个视图引用的。
You have to close the modal from the view where you reference it 您必须从引用它的视图中关闭模态
modalView.close();
Solved my issue: 解决了我的问题:
It was because i had multiple instances of my detailsview that the modal was being rendered so many times. 这是因为我有我的详细信息视图的多个实例,模式被渲染了很多次。
What i did to solve the issue: 我做了什么来解决这个问题:
Gave a unique $el
to my DetailsView
给我的
DetailsView
一个独特的$el
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.