时间戳

首页 > 解决方案 > Update a property using parent template's event handlers

typescript - Update a property using parent template's event handlers

问题描述

I am trying to design some components using FASTElement. However, I couldn't pass a dynamic property from parent to a child component. In my design, I have two FAST templates as follows,

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";
    }

I referenced customTheme property in the model files,

ParentModel.ts <= this is an interface

...
customTheme?: CustomTheme;
...

ChildModel.ts

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

However, when I triggered the event, I saw no change in the child component's div class. Could you please help me to understand which point that I am missing?

Thanks for the help!

TL;DR I want to update a property when some specific event is fired on the parent template. However, changes are not affecting the child.

标签： typescriptfast-ui

解决方案

这种情况肯定会奏效。我突然想到的一件事是您的活动名称。你有@mouseEnter和@mouseExit。我认为您的事件没有触发，因此状态的变化实际上并没有发生。尝试将这些更改为@mouseenterand @mouseleave。

推荐阅读