javascript - 在 Aurelia 应用程序中正确使用 dispatchEvent

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 事件已分派(dispatch)并完美运行。但是，selected 事件不起作用，没有错误，没有任何错误。

我做错了什么？ remove 事件的灵感来自这个 blogpost并基于此documentation我创建了 _disptachSelectEvent 方法。

另请参阅此要点:https://gist.run/?id=21bc5ce19d2e09a41819b6a930939f96

Answer 1

稍作调整(在 calculatePrice() 函数中添加 this.)，您的要点运行良好:https://gist.run/?id=4e214dec2a81e47b45904d745bf5a4ee

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

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