Строковые литералы JavaScript повторно используют компоненты - PullRequest
Новая
       11

Строковые литералы JavaScript повторно используют компоненты

1 голос
/ 26 сентября 2019

Я пытаюсь использовать шаблонные / строковые литералы для шаблонов, я смотрел несколько видео на эту тему и следил за этим отличным учебником.

Я думал, что это будет довольноПрохладный с многоразовыми кусками, потому что некоторые элементы встречаются несколько раз.

Функция шаблона 

function templater(strings, ...keys) {

    return function(data) {
        let temp = strings.slice();
        keys.forEach((key, i) => {
            temp[i] = temp[i] + data[key];
        });
        return temp.join('');
    }
};

Пример кусков 

let contentHead = `
    <header>
        ${'myHeader'}
    </header>
`

let contentFooter = `
    <footer>
        ${'myFooter'}
    </footer>
`

Шаблон, который упакован со всеми необходимыми патронами 

let contentTemplate = templater`
    <div>
        ${'contentHead'}
        ${'contentFooter'}
    </div>
    `

Здесь я устанавливаю данные для шаблона 

const content = {
    myHeader: 'This is my header',
    myFooter: 'This is my footer',
    contentHead: contentHead,
    contentFooter: contentFooter,
}

Вот как я проверяю код 

const myTemplate = contentTemplate(content);
console.log(myTemplate);

Выход будет 

<div>
   <header>
       myHeader
   </header>
   <footer>
       myFooter
   </footer>
</div>

Если ясделайте это без вызова таких переменных, как эта 

let contentTemplate = templater`
    <div>
         <header>
             ${'myHeader'}
         </header>
         <footer>
             ${'myFooter'}
        </footer>
    </div>


const content = {
    myHeader: 'This is my header',
    myFooter: 'This is my footer'
}

Вывод будет правильным 

<div>
   <header>
       This is my header
   </header>
   <footer>
       This is my footer
   </footer>
</div>

Так почему это не работает, я вызываюдве строковые литеральные переменные в объекте JSON, который затем используется в функции templater, не работает, потому что эти два блока передаются в oза пределами помеченной функции шаблона, а затем переключился на шаблон без какого-либо собственного содержимого?

Как я могу исправить это наилучшим из возможных способов?:)

1 Ответ

1 голос
/ 28 сентября 2019

В ваших примерных чанках не используется templater, они являются обычными шаблонными строками и сразу же интерполируются.contentHead и contentFooter - это всего лишь две строки, они вставляются точно так же, как myHeader и myFooter вставляются вашей функцией в вашем рабочем примере.

Вместо этого используйте templater в чанкахи пусть он рекурсивно передает data функциям чанка: 

function templater(parts) {
    return function(data) {
        let res = parts[0];
        for (let i=1; i<parts.length; i++) {
            const val = arguments[i];
            if (typeof val == "function") {
                res += val(data);
            } else {
               res += data[val];
            }
            res += parts[i];
        }
        return res;
    }
};

Вы можете использовать это так: 

const contentHead = templater`
    <header>
        ${'myHeader'}
    </header>
`;
const contentFooter = templater`
    <footer>
        ${'myFooter'}
    </footer>
`;
const contentTemplate = templater`
    <div>
        ${contentHead}
        ${contentFooter}
    </div>
`;

console.log(contentTemplate({
    myHeader: 'This is my header',
    myFooter: 'This is my footer',
}));

Если вы хотите ссылаться на чанки по их именив data, а не напрямую через ссылку на переменную во время построения contentTemplate, вы также можете проверить, является ли data[key] функцией.

...