Обновление свойства с помощью обработчиков событий родительского шаблона

Question

Я пытаюсь разработать некоторые компоненты с помощью FASTElement. Однако я не мог передать динамическое свойство от родительского к дочернему компоненту. В моем дизайне у меня есть два шаблона FAST:

childCompTemplate.ts

      const myChildComponent = () => html<ChildModel>`<div class=${x => x.customTheme!.someSpecialClassName}`>
    <!-- some stuff -->
</div>`

parentCompTemplate.ts

      const myParentComp = () => html<ParentModel>`<div @mouseEnter=${x => x.customTheme!.handleMouseEnterEvent()} @mouseExit=${x => x.customTheme!.handleMouseExit()}`>
    <my-child-component :customTheme=${x => x.customTheme} />
</div>`

CustomTheme.ts

      public class CustomTheme {
    @observable someSpecialClassName: string;
    /* Some other props and functions */

    public handleMouseEnter() {
        this.someSpecialClassName = "foo";
    }

    public handleMouseExit() {
        this.someSpecialClassName = "bar";
    }

Я ссылался на свойство customTheme в файлах модели,

ParentModel.ts <= это интерфейс

      ...
customTheme?: CustomTheme;
...

ChildModel.ts

      ...
@observable customTheme?: CustomTheme;
...

Однако, когда я инициировал событие, я не увидел изменений в классе div дочернего компонента. Не могли бы вы помочь мне понять, какой момент я упустил?

Спасибо за помощь!

TL;DR Я хочу обновить свойство, когда какое-то конкретное событие запускается в родительском шаблоне. Однако изменения не коснулись ребенка.

Answer 1

Этот сценарий определенно должен работать. Одна вещь, которая бросилась мне в глаза, это названия ваших мероприятий. У вас есть @mouseEnterа также @mouseExit. Я думаю, что ваши события не запускаются, поэтому изменение состояния на самом деле не происходит. Попробуйте изменить их на @mouseenterа также @mouseleave.