Есть ли в JS какие-то встроенные механизмы шаблонизации? Например, есть

Question

Есть ли в JS какие-то встроенные механизмы шаблонизации? Например, есть

<template><div class="item">{var}</div></template>. Данные приходят в JSON, хочу вместо {var} подставлять эти данные. Сейчас делаю стандартно через .querySelector('.item'). Но в JS вообще нуб)) поэтому может есть что-то более удобное решение без сторонних библиотек?

#frontend #programming #russian

0

06.07.2022

14 ответов

17 просмотров

Максим Завалишин Автор вопроса

Про это собственно и веду речь) но туда добавлять данные приходится обычным способом через quryselector и подобные штуки. Но эт не совсем удобно, поэтому и возник вопрос.

0

06.07.2022

Andrew

Максим Завалишин
Про это собственно и веду речь) но туда добавлять ...

можно сделать отдельную функцию которая будет принимать данные и отдавать html, через шаблонные строки, положить в отдельный файл

0

06.07.2022

Rone

async processTemplate(template, data) { data = typeof data === 'function' ? await data() : await data; Object.keys(data).forEach(key => template = template.replace(new RegExp({${key}}, 'g'), ${data[key]})); return new Range().createContextualFragment(template); } const template = processTemplate( <div>{test}</div> , async () => await SERVER.RESPONSE); // ну или просто статический объект данных const template = processTemplate( <div>{test}</div> , { test : '🇰🇿' });

0

06.07.2022

Rone

Rone
async processTemplate(template, data) { data =...

Телеграм кое-где экранировал ``. + я не тестил

0

06.07.2022

Andrew

Rone
Телеграм кое-где экранировал ``. + я не тестил

если все обернуть в тройные бектики будет все красиво

0

06.07.2022

Rone

async processTemplate(template, data) { data = typeof data === 'function' ? await data() : await data; Object.keys(data).forEach(key => template = template.replace(new RegExp({${key}}, 'g'), ${data[key]})); return new Range().createContextualFragment(template); } const template = processTemplate( <div>{test}</div> , async () => await SERVER.RESPONSE); // ну или просто статический объект данных const template = processTemplate( <div>{test}</div> , { test : '🇰🇿' });

0

06.07.2022

Максим Завалишин Автор вопроса

Rone
async processTemplate(template, data) { data =...

Ну т.е. вывод такой, что пока встроенных возможностей в js нет для этих целей? Все равно приходится писать какие-то «надстройки»

0

06.07.2022

Максим Завалишин Автор вопроса

Уже писал в первом посте. Если коротко: есть html (элемент template), который формирует сервер на php. Есть js код, чтобы асинхронно получать данные и вставлять в Dom , используя шаблон из элемента template. Поидеи задача стандартная. Но чтоб подставить данные какие то, нужно постоянно делать queryselector и т.п. другими словами, сделать по аналогии с php: ‘<div><? $value ?></dig>’, но нашивными средствами без надстроек. Но я так понял из гугла, такого способа нет. Но т.к. в js я нуб, есть вероятность, что не правильно делаю запрос в Гугл)))

0

06.07.2022

Максим Завалишин Автор вопроса

Ну то есть я изначально получаю шаблон : querySelector(.item). А потом как «распариться» внутренний код?

0

06.07.2022

Maksim

Максим Завалишин
Уже писал в первом посте. Если коротко: есть html ...

вставляй так `${value}`

0

06.07.2022

Andrew

Максим Завалишин
Ну то есть я изначально получаю шаблон : querySele...

не, в данном подходе не надо использовать template штуки) вот как это делается https://github.com/f3d0t/public-apis-app/blob/b86adc6313c757a9bcc10c09200a9ba6ca4f2574/src/components/Header/Header.js

0

06.07.2022

Максим Завалишин Автор вопроса

Maksim
вставляй так `${value}`

Куда вставлять, если нужно подставить эти данные в уже существующий DOM элемент?

0

06.07.2022

Максим Завалишин Автор вопроса

Andrew
не, в данном подходе не надо использовать template...

Но тут ведь снова html внутри js кода.

0

06.07.2022