如何检查用户是否确认自定义模态框？Backbone.js模态框逻辑异常排查

Hey there! Let's break down and solve the two main problems you're facing with your Backbone.js modal implementation.

1. Fixing the Unreachable Control Variable (and Accidental Search Triggers) #

It sounds like your 1/0 control variable isn't being accessed correctly, which is why your search runs every time instead of being gated by your logic. The most common culprit here is scope issues in Backbone views. Here's how to fix it:

Common Scope Mistakes & Fixes #

• Don't use global/local variables: If you defined the variable outside your ModalView or as a local variable inside a function, it won't persist across view interactions or be accessible where you need it. Instead, attach it to the view instance itself:

  // Inside ModalView's initialize method
  initialize: function() {
    this.modalConfirmed = 0; // 0 = not confirmed, 1 = confirmed
    _.bindAll(this, 'handleSearchTrigger'); // Ensures 'this' points to the view in event handlers
  }
  

• Check event handler this binding: When you set up click events or triggers, make sure this refers to your ModalView instance. Without binding, this might point to the DOM element instead, so accessing this.modalConfirmed would fail. Use _.bindAll (from Underscore.js, which Backbone depends on) or ES6 arrow functions to fix this.

Example of Corrected Logic #

Suppose your search is triggered by a button click. Your event handler should check the view's modalConfirmed property before running the search:

// Inside ModalView
events: {
  'click .search-btn': 'handleSearchTrigger'
},
handleSearchTrigger: function() {
  if (this.modalConfirmed === 1) {
    // Run your search logic here
    this.executeSearch();
    this.modalConfirmed = 0; // Reset the flag after search
  } else {
    // Open the modal instead of searching
    this.openModal();
  }
},
onModalConfirm: function() {
  this.modalConfirmed = 1;
  this.closeModal();
  // Optionally trigger the search immediately after confirmation
  this.handleSearchTrigger();
}

2. Checking If the User Confirmed Your Custom Modal #

To track whether the user clicked "Confirm" or "Cancel" in your modal, you have two reliable approaches in Backbone:

Approach 1: Use Instance Flags #

As we did above, add a boolean/number property to your ModalView instance that gets updated when the user interacts with the modal buttons. Then, check this property wherever you need to act on the confirmation.

Approach 2: Pass Callback Functions (Cleaner for Cross-View Communication) #

If your modal is triggered from another file (like modal_test.js), pass success/cancel callbacks when initializing the modal. This keeps your logic decoupled:

// In modal_test.js, when creating the modal
var myModal = new ModalView({
  onConfirm: function() {
    // This runs when the user clicks confirm
    console.log('User confirmed! Running search...');
    // Call your search function here
    runSearch();
  },
  onCancel: function() {
    // This runs when the user clicks cancel
    console.log('User canceled. Skipping search.');
  }
});

// Inside ModalView.js
initialize: function(options) {
  this.onConfirm = options.onConfirm;
  this.onCancel = options.onCancel;
},
events: {
  'click .modal-confirm': 'handleConfirm',
  'click .modal-cancel': 'handleCancel'
},
handleConfirm: function() {
  this.onConfirm && this.onConfirm();
  this.closeModal();
},
handleCancel: function() {
  this.onCancel && this.onCancel();
  this.closeModal();
}

This way, you don't have to worry about accessing variables across files—your modal simply notifies the caller of the user's choice via callbacks.

内容的提问来源于stack exchange，提问作者Justin Boucher