Having trouble updating the view when using the new Datasources on custom component

[VanShane]

Hi,

I'm trying out the new Datasources implementation which is great but I'm having trouble updating the component view in the canvas (the model is correctly updated and reflects the user change), any help would be appreciated !

Here below you will find the example component I'm trying to create:

test data:

[
    {
        "id": 1,
        "fullname": "Jhon Doe",
        "mail": "[email protected]",
        "tel": "01 02 03 04 05",
        "birthDate": "1997/01/01"
    },
    {
        "id": 2,
        "fullname": "Jane Doe",
        "mail": "[email protected]",
        "tel": "01 03 04 05 06",
        "birthDate": "1989/12/23"
    }
]

adding the datasource:

// load data sources
    const datasourceManager = editor.DataSources;

    // add users to datasource manager
    fetchUsers().then((users) => {
        datasourceManager.add({ id: 'users', records: users });

        editor.trigger('editor:initialized');
    });

component:

editor.DomComponents.addType('user', {
    isComponent: (el) => el.classList.contains('cmp-user'),

    model: {
        defaults: {
            tagName: 'div',
            classes: [{ name: 'cmp-user', private: true }],
            user: null,
            styles: `
                .cmp-user {
                    padding: 0.5rem;
                }
            `,
        },

        init() {
            this.initUserTrait();
            this.on('change:user', this.handleChangeUser);
        },

        initUserTrait() {
            const traits = this.get('traits');
            const usersDatasSource = this.em.DataSources.get('users');
            const userTrait = {
                type: 'select',
                name: 'user',
                label: 'User',
                options: usersDatasSource.getRecords().map((record) => ({
                    id: record.get('id'),
                    label: record.get('fullname'),
                })),
                changeProp: true,
            };

            this.set('traits', [...traits, userTrait]);
        },

        handleChangeUser() {
            const user = Number(this.get('user'));

            this.set('components', [
                {
                    tagName: 'h3',
                    removable: false,
                    copyable: false,
                    editable: false,
                    type: 'data-variable',
                    defaultValue: 'Fullname',
                    path: `users.${user}.fullname`,
                },
                {
                    type: 'text',
                    tagName: 'p',
                    removable: false,
                    copyable: false,
                    editable: false,
                    propagate: ['editable', 'removable', 'copyable'],
                    components: [
                        { type: 'textnode', content: 'E-mail: ' },
                        {
                            tagName: 'span',
                            type: 'data-variable',
                            defaultValue: 'E-mail',
                            path: `users.${user}.mail`,
                        },
                    ],
                },
                {
                    type: 'text',
                    tagName: 'p',
                    removable: false,
                    copyable: false,
                    editable: false,
                    propagate: ['editable', 'removable', 'copyable'],
                    components: [
                        { type: 'textnode', content: 'Tel: ' },
                        {
                            tagName: 'span',
                            type: 'data-variable',
                            defaultValue: 'Tel',
                            path: `users.${user}.tel`,
                        },
                    ],
                },
            ]);

            // This works but loses styling ?! padding on .cmp-user is lost
            // this.forceUpdate();
        },

        forceUpdate() {
            const coll = this.collection;
            console.log({ coll });
            const at = coll.indexOf(this);
            coll.remove(this);
            coll.add(this, { at });
        },
    },

    view: {
        init() {
            // None of these work ?!
            // this.listenTo(this.model, 'change:user', this.render);
            // this.listenTo(this.model.components(), 'add remove', this.render);
            // this.listenTo(this.model, 'component:update:components', this.render);
        },

        onRender({ el, model }) {
            const components = model.components();
            if (components.length < 1) {
                el.textContent = 'Please select a user';
                return;
            }
        },
    },

    block: {
        id: 'user',
        label: 'User',
    },
});

[artf]

Try to change the way you're updating your components, this.components([ ... instead of this.set('components'

[VanShane]

Thanks @artf, this solved the issue. May I ask why using set does not work compared to this method ? Thanks again have a nice day !