基于bootstrap-toggle的自定义元素未更新属性绑定问题

Got it, let's fix that two-way binding problem with your custom toggle element. The core issue here is that Bootstrap Toggle is a jQuery plugin that operates outside of Aurelia's data-binding lifecycle. That means:

• When a user clicks the toggle to change its state, Aurelia doesn't automatically know to update your checked bindable property.
• If you update the checked property programmatically (from a parent component, for example), the Bootstrap Toggle UI won't reflect that change unless you explicitly tell it to.

Here's the complete, fixed implementation:

Updated toggle.ts Code #

import {bindingMode, bindable, customElement} from "aurelia-framework";

@customElement('toggle')
export class Toggle {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) checked;
  // Holds a reference to our checkbox DOM element
  input;

  attached() {
    // Initialize the Bootstrap Toggle plugin
    $(this.input).bootstrapToggle();
    
    // Sync user-triggered toggle changes back to Aurelia's bindable property
    $(this.input).on('change', (e) => {
      this.checked = $(e.target).prop('checked');
    });

    // Ensure the toggle starts with the correct initial state
    this.checkedChanged(this.checked);
  }

  // Automatically runs when the `checked` bindable property changes
  checkedChanged(newValue: boolean) {
    // Only update if the toggle plugin is already initialized
    if (this.input && $(this.input).data('bootstrap-toggle')) {
      $(this.input).bootstrapToggle(newValue ? 'on' : 'off');
    }
  }

  detached() {
    // Clean up to avoid memory leaks
    $(this.input).off('change');
    $(this.input).bootstrapToggle('destroy');
  }
}

Updated toggle.html Template #

Don't forget to add a ref attribute to your checkbox so the component can access the DOM element. Here's the full template:

<template>
  <require from="bootstrap-toggle/css/bootstrap2-toggle.min.css"></require>
  <require from="bootstrap-toggle"></require>
  <!-- Link the DOM element to our component's `input` property -->
  <input type="checkbox" ref="input">
</template>

Let's break down the fixes: #

1. User Input Sync: The change event listener catches when a user interacts with the toggle, updates the checked property, and triggers Aurelia's two-way binding to sync the change back to the parent view-model.
2. Programmatic Update Sync: The checkedChanged callback runs whenever the checked property is updated from code, telling Bootstrap Toggle to adjust its UI state to match the new value.
3. Memory Leak Prevention: The detached method cleans up event listeners and destroys the toggle instance when the component is removed from the DOM.
4. Initial State Setup: Calling checkedChanged in attached ensures the toggle starts with the correct state based on the initial checked value passed in.

This should fully resolve your binding issues—now the toggle will sync seamlessly both ways: from user input to your view-model, and from view-model updates to the toggle UI.

内容的提问来源于stack exchange，提问作者Moritz Becker