Тема: А чи можна в файлі Js шукати масив по назві масива?

Вітаю всіх. Рішив як що можна так сказати, "погратись" чи потренеруватись в JS, і зробити свого роду сайт конструктор на JS. І виникло питання. А як взагалі перебирати і порівнювати чи відповідає якийс текст назві масива з даними?

є файл моделей масива model.js

export const testmodel = [

    new ImageBlock(image, {
        styles: {
            padding: '2rem 0',
            display: 'flex',
            'justify-content': 'center'
        },
        imageStyles: {
            width: '500px',
            height: 'auto'
        },
        alt: 'Це картинка'} ),
    new ColumnsBlock([
        '111',
        '222',
        '333'
    ],{
        styles: {
            background: 'linear-gradient(to bottom, #8e2de2, #4a00e0)',
            padding: '2rem',
            color: '#fff',
            'font-weight': 'bold'
        }
    }),

    new TextBlock(text,{
        styles: {
            background: 'linear-gradient(to left, #f2994a, #f2c94c)',
            padding: '1rem',
            'font-weight': 'bold'
        }
    }),
]

export const Home = [

    new ImageBlock(image, {
        styles: {
            padding: '2rem 0',
            display: 'flex',
            'justify-content': 'center'
        },
        imageStyles: {
            width: '500px',
            height: 'auto'
        },
        alt: 'Це картинка'} ),
    new ColumnsBlock([
        '111',
        '222',
        '333'
    ],{
        styles: {
            background: 'linear-gradient(to bottom, #8e2de2, #4a00e0)',
            padding: '2rem',
            color: '#fff',
            'font-weight': 'bold'
        }
    }),
]




є файл з меню sidebar.js, де є кнопкі

 get template() {
        return [
            block('text'),
            block('title'),
            blockBtn('Home')
        ].join('')
    }
    add(event){
        event.preventDefault()

        const type = event.target.name


        if (!event.target.value || !event.target.styles){

            const site = new Site('#site')
            site.render(Home)

        }

Як можна зробити так щоб

blockBtn('Home') .

А точніше його назва

вдіповідала масиву site.render(Home)

Тобто щоб по Стрінгу з кнопки blockBtn('Home') . можна було найти масив з назвою Home і запустити його за допомогою

site.render(Home)

Ось сам рендер

    render(model) {
        this.$el.innerHTML = ''
        model.forEach(block => {
            this.$el.insertAdjacentHTML('beforeend', block.toHTML())
        })

    }

2

Re: А чи можна в файлі Js шукати масив по назві масива?

GPT-4 написав:

Створити об'єкт, який зберігатиме відповідність між назвами кнопок та масивами. Для цього модифікувати файл model.js таким чином:

export const models = {
    Home: [
        // тут ваші блоки для Home
    ],
    testmodel: [
        // тут ваші блоки для testmodel
    ],
}

Після цього імпортувати цей об'єкт у файл sidebar.js:

import {models} from './model.js';

Тепер, замість безпосереднього використання Home, можна отримати відповідний масив, використовуючи стрічку з назвою кнопки. Змінити обробник події add таким чином:

add(event) {
    event.preventDefault();

    const type = event.target.name;

    if (!event.target.value || !event.target.styles) {
        const site = new Site('#site');
        const modelName = 'Home'; // тут можна використати змінну з назвою кнопки
        const model = models[modelName]; // отримуємо відповідний масив за назвою
        site.render(model);
    }
}

Тепер можна використовувати стрічку з назвою кнопки для отримання відповідного масива та викликати site.render() з потрібним масивом.