javascript - 在 Backbone 中添加多个模态

我正在从 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;

模态视图

    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;

如果我打开一个模态，然后关闭它，然后打开模态的另一个实例，它会超过前一个。



请帮忙。

我的问题:

最佳答案

Vini，您的模态视图永远不会从父 View 或从自身调用 remove http://backbonejs.org/#View-remove 。

模态很难跟踪。正是因为这个原因，我使用了 Rendering bootstrap modal using backbone

尽管如此!
看看你拥有的事件。您无需清理绑定(bind)或删除后续 View 即可重新渲染父 View 。

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);

我感觉每次重新渲染/更新“sku”时，this.listenTo(self.skuListingModel, 'change', self.render); 都会绑定(bind)“单击事件”
删除它并查看它的工作原理。

关于javascript - 在 Backbone 中添加多个模态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32182787/