时间戳

首页 > 解决方案 > Aurelia 自定义元素从函数中冒泡/委托？

typescript - Aurelia 自定义元素从函数中冒泡/委托？

问题描述

我有一个自定义元素，可以在跨度中显示一些文本，如果用户决定编辑文本，我会隐藏跨度并显示文本输入。当用户关注文本输入时，我隐藏输入并使用更新的文本再次显示跨度。这一切都很好。

当我在页面上使用自定义元素时，我需要能够触发页面上的函数以从自定义元素中获取更新的文本来更新数据库中的文本。

当用户完成编辑文本并重新显示跨度时，我不知道如何冒泡该事件，因此我可以调用页面上的函数来保存更改。如果我使用的是按钮或其他东西，我可以设置按钮单击的委托，但由于我没有使用按钮，因此不知道如何完成此操作。

希望这是有道理的！提前致谢！

这是一些精简的代码。

自定义元素.html：

<i if.bind="icon" class="${icon}"></i><span if.bind="!(allowEditTitle && isEditingTitle)" maxlength>${title}</span>
<input ref="titleInputEditor" type="text" value.bind="title" if.bind="allowEditTitle && isEditingTitle" maxlength="100" />

自定义元素.ts

@bindable title: string;
@bindable allowEditTitle: boolean = false;
isEditingTitle: boolean = false;

toggleEditTitle() {
    let me = this;
    if (this.allowEditTitle === true) {
        this.isEditingTitle = !this.isEditingTitle;
    }
    if (this.isEditingTitle == true) {
        window.setTimeout(function () {
            $(me.titleInputEditor).focus();
            $(me.titleInputEditor).select();
            $(window).one('click', function () {
                if (me.isEditingTitle == true) {
                    me.toggleEditTitle();
                } 
            });
            $(me.titleInputEditor).one('click', function (e) {
                e.stopPropagation();
            });
            $(me.titleInputEditor).one('focusout', function () {
                me.toggleEditTitle();
            });
        });
    }
}

应用程序.html

<custom-element title="Default Text" 
        allow-edit-title.bind="true" 
        on-???????.call="saveTextFunction">
</custom-element>

标签： typescripteventsdelegatesaurelia

解决方案

您可以使用aurelia-event-aggregator来完成此操作。您可以在 上发布一个事件focusout，并在代码中的其他位置订阅该事件（很可能是某处的服务），这将更新您的数据库。

自定义元素.ts

import { autoinject, EventAggregator } from "aurelia-framework";

@autoinject
export class CustomElement {
  constructor(private ea: EventAggregator)


...

        $(me.titleInputEditor).one('focusout', function () {
            me.ea.publish('input-changed', me.title);
            me.toggleEditTitle();
        });
...
}

服务.ts

import { autoinject, EventAggregator } from "aurelia-framework";

@autoinject
export class Service {
  constructor(private ea: EventAggregator)

  public attached() {
    this.ea.subscribe('input-changed', (value) => {
       // update database using value
    });
  }
}

有关事件聚合器的更多文档，请参阅此处。

推荐阅读