在骨干网添加多模态 [英] Multiple modals being added in Backbone

问题描述

我从DetailsView中打开模态

I am opening the modal from the DetailsView

如下：

    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;

如果我开立一个模式，然后将其关闭，然后打开模式的另一个实例涉及超过previous之一。

If i open one modal and then close it and then open another instance of the modal it comes over the previous one.

请帮忙。

我的问题：

推荐答案

解决我的问题：

这是因为我有模态正在变得这么多次我DetailsView控件的多个实例。

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:

给了一个独特的 $ EL 我的 DetailsView控件

这篇关于在骨干网添加多模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！