Question

我有以下自定义元素：

<template>
<div class="input-group">
    <div class="input-group-addon left">${groupAddonLeftText}</div>
    <input type="text" autocomplete="off" class="form-control big left-addon right-addon" id="address" value.bind="value & debounce">

    <div class="input-group-addon right">
        <span class="icon ${iconClass}"></span>
    </div>


    <div class="auto-complete-wrapper ${showSuggestions ? 'open': ' '}">
        <ul>
            <li repeat.for="suggestion of suggestions">
                <div click.delegate="selectSuggestion(suggestion)">
                    <p>
                        <strong>${suggestion.street}</strong>
                    </p>
                    <p>${suggestion.city}</p>
                </div>
            </li>
        </ul>
    </div>
</div>
</template>

使用selectSuggestion方法的viewModel：

export class Autocomplete {

    ///removed init stuff for readability

     selectSuggestion(suggestion) {
        this.value = `${suggestion.street}, ${suggestion.city}`;
        this.suggestions = [];
        this.hideSuggestions = true;

        this._dispatchSelectEvent();
    }

    _dispatchSelectEvent() {
        let selectEvent;

        if (window.CustomEvent) {
            selectEvent = new CustomEvent("selected", { bubbles: true });
        } 
        else {
            selectEvent = document.createEvent("CustomEvent");
            selectEvent.initCustomEvent("selected", true, true, {});
        }
        this.element.dispatchEvent(selectEvent);
    }

    _createCallbackEvents() {
        $("span.icon-close-cross").on("click", (ev) => {
            let clickEvent;

            if (window.CustomEvent) {
                clickEvent = new CustomEvent("remove", { bubbles: true });
            } else {
                clickEvent = document.createEvent("CustomEvent");
                clickEvent.initCustomEvent("remove", true, true, {});
            }
            this.element.dispatchEvent(clickEvent);
        });
    }
}

我在我的html中应用自定义元素：

<autocomplete remove.delegate="remove()" selected.delegate="calculatePrice()"></autocomplete>

remove事件已发送并完美运行。然而，selected事件不起作用，没有任何错误。

我做错了什么？ remove活动的灵感来自此blogpost，并基于此documentation我创建了_disptachSelectEvent方法。

另见这个要点：https://gist.run/?id=21bc5ce19d2e09a41819b6a930939f96

Answer 1

通过微调（在this.函数中添加calculatePrice()），您的要点运行良好：https://gist.run/?id=4e214dec2a81e47b45904d745bf5a4ee

export class App {
  message = 'Hello World!';

  calculatePrice(){
    this.message = "calculatedPrice!"
  }
}

在Aurelia应用程序

1 个答案: