时间戳

首页 > 解决方案 > 自定义多选下拉元素中的 checkedChange 事件

javascript - 自定义多选下拉元素中的 checkedChange 事件

问题描述

我有一个multiselect-dropdown.html带有它自己的.js，以及一个edit-user.html带有它自己的.js。

当我edit-user.html单击multiselect-dropdown.html.

我发现 aurelia 文档有点缺乏信息。

我认为我不需要粘贴 js 文件，我只需要有关如何edit-user.html从列表项中调用函数的指示，multiselect-dropdown.html这可能吗？一些提示会有所帮助。

<template>
  <div class="dropdown">
    <button id="${baseId}" 
            class="dropdown-toggle form-control input" 
            type="button" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            aria-expanded="false">
      <span class="multiselect-dropdown-selection">${textCaption}</span>
      <span class="caret"></span>
    </button>

    <ul class="dropdown-menu input" 
        aria-labelledby="${baseId}" 
        click.trigger="preventDropDownClose($event)">
      <li if.bind="!disableOriginal">
        <a>
          <label>
            <input 
              type="checkbox" 
              id="multiselect-dropdown-select-default" 
              checked.bind="isSelectOriginal"> 
            ${textSelectOriginal}
          </label>
        </a>
      </li>

      <li>
        <a>
          <label>
            <input 
              type="checkbox" 
              id="multiselect-dropdown-select-all" 
              checked.bind="isSelectAll">
            ${textSelectAll}
          </label>
        </a>
      </li>

      <li role="separator" class="divider"></li>

      <li repeat.for="option of options" onmousedown=>
        <a>
          <label>
            <input // This should send a trigger to a function in edit-user.html
              type="checkbox" 
              class="multiselect-dropdown-option"
              checked.bind="option.checked"> ${option.name}        
          </label>
        </a>
      </li>
    </ul>
  </div>
</template>

这是多选，如果复选框已被选中或未选中，edit-user.html我如何调用函数？edit-user.htmlmultiselect-dropdown.html

    <div class="form-group user-multiselect-dropdown">
      <label for="address" class="regular-15-25">Mina valda adresser</label>
      <multiselect-dropdown 
        options.bind="selectedAddresses"
        noun-singular="adress"
        noun-plural="adresser">
      </multiselect-dropdown>
    </div>

标签： javascripthtmlaurelia

解决方案

您需要使用如下属性将函数绑定到您<multiselect-dropdown>的.call属性：

<multiselect-dropdown function-name.call="checkboxChanged()"></multiselect-dropdown>

您可以在您的视图模型中绑定到它，multiselect-dropdown如下所示：

@bindable()
public functionName: () => void; // or without typing if you don't use typescript

注意函数名的大小写；在 HTML 中，您用破折号 ( -) 分隔的内容在您的视图模型中是驼峰式，例如function-name变为functionName

现在，只要复选框更改，您只需在视图模型中调用该函数。您可以使用装饰器observe来获取复选框的值，并在它更改时调用该函数。@observable如果要观察对象的属性，则需要使用bindingEngine。

import { bindable, observable, bindingEngine, autoinject } from "aurelia-framework";

@autoinject
export class Foo {
  @bindable()
  public functionName: () => void;

  @observable()
  public checkboxValue: boolean;

  public option = {
    checked: true;
  }

  constructor(private bindingEngine: BindingEngine) {}

  attached() {
    // subscribe to an object property
    this.subscription = this.bindingEngine.propertyObserver(this.option, "checked").subscribe(() => {
       this.functionName();
    }
  }

  detached() {
    // Dispose subscription to avoid memory leak
    this.subscription.dispose();
  }

  // Observe a single field for changes
  checkboxValueChanged() {
    this.functionName();
  }
}

推荐阅读