backdraftjs - backdraftjs 组件如何操作子组件上的 watchable？

Question

我觉得我在这里遗漏了一些明显的东西，但是看看这段代码......

class ShowMessageButton extends Component {                
    showTheInfo() {
        // what goes here??? 
    }
    
    bdElements() {
        return e.div(
            {bdAdvise: {click: 'showTheInfo'}},
            'Click Me to see the Secret Message',
            e(SecretMessage)
        );
    }
}

class SecretMessage extends Component.withWatchables('showMe') {
    constructor(kwargs) {
        super(kwargs);
        this.showMe = false;
    }
    bdElements() {
        return e.div({
            bdReflectClass: ['showMe', s => s ? '' : 'hidden'],
        }, 'You clicked! The secret message is "howdy"')
    }
}

...showTheInfo将 SecretMessage 的可观看设置showMe为什么true？

标签： backdraftjs

Answer 1

啊! 弄清楚了。需要设置bdAttach以获取对子组件的引用：

class ShowMessageButton extends Component {                
    showTheInfo() {
        this.secretMsg.showMe = true;
    }
    
    bdElements() {
        return e.div(
            {bdAdvise: {click: 'showTheInfo'}},
            'Click Me to see the Secret Message',
            e(SecretMessage, {bdAttach: 'secretMsg'})
        );
    }
}