Can you use a backdraftjs watchable to make a component completely re-render?

  backdraftjs, javascript

This is a contrived example but it is similar to real-life situations where, for example, you might have a list of links built from data that you are AJAXing in from a server.

import {Component, e, render} from './node_modules/bd-core/lib.js';
            
// a list of strings that for alert when you click them
class AlertLinkList extends Component.withWatchables('data') {
    handleClick(event){
        alert(event.target.innerHTML);
    }
    
    bdElements() {
        return e.div(
            {
                // bdReflect: ?????
            },
            ['yes', 'no', 'maybe'].map(
                txt => e.div({bdAdvise: {click: 'handleClick'}}, txt)
            )
        )
    }
}

var linkList = render(AlertLinkList, {}, document.body);

// I would like to change the strings but this (obviously) does nothing
linkList.data = ['soup', 'nuts', 'fish', 'dessert'];

I can’t think of a straightforward way to solve this.

bdReflect only works on writable DOM attributes, I think, so for example I could use it to replace the innerHTML of the component but then I think I lose the bdAdvise assignments on the links (and it also seems kinda kludgey).

Any ideas?

Source: Ask Javascript Questions

LEAVE A COMMENT