Question

我有一个{。{1}}和它自己的.js，还有一个multiselect-dropdown.html和它自己的.js。

当我单击edit-user.html中的复选框或列表项时，我试图使其触发edit-user.html中的功能。

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

我认为不需要粘贴js文件，我只需要指示如何从multiselect-dropdown.html中的列表项调用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.html中调用函数？

multiselect-dropdown.html

Answer 1

您需要使用<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();
  }
}

Answer 2

Jesse的答案是两种有效的解决方法之一。另一种方法是从您的自定义元素中调度CustomEvent，然后从使用该自定义元素的视图中进行订阅。

在multiselect-dropdown.js内部：

// without your JS it's hard to assume what you need, but here's the gist of it
// assuming this method is called in some way in response to a change
onSelectionChanged() {
    const detail = {
        component: this, // include whatever information the consuming view needs
    };
    const event = new CustomEvent('select', { bubbles: true, detail });
    this.el.dispatchEvent(event); // assuming this.el is the injected Element instance
}

在edit-user.html中：

<multiselect-dropdown select.trigger="handleSelect($event)">
</multiselect-dropdown>

在edit-user.js中：

handleSelect($event) {
    const detail = $event.detail;
    // do stuff with detail.component or whichever info you included
    return false; // stops the event from bubbling further up
}

如您所见，就.call而言，与调度自定义事件相比，它们在解决哪些问题方面有很多重叠之处。

我个人偏爱源自DOM事件的调用是将它们保留为事件。当您需要将更改进一步传递到DOM树时，它使您可以更接近使用HTML的自然方式。

另一方面，

.call导致创建的对象和侦听器更少，并且在非常大型的应用程序中可能导致更好的性能（尤其是较低的内存使用）。在清除/取消传播等方面，它也使您不必担心。

两者都有时间和地点，请根据自己的情况选择合适的方式。

自定义multiselect-dropdown元素中的checkedChange事件

2 个答案: