<template><div class="item">{var}</div></template>. Данные приходят в JSON, хочу вместо {var} подставлять эти данные. Сейчас делаю стандартно через .querySelector('.item'). Но в JS вообще нуб)) поэтому может есть что-то более удобное решение без сторонних библиотек?
Можно с помощью шаблонных строк создавать) это самое простое
Про это собственно и веду речь) но туда добавлять данные приходится обычным способом через quryselector и подобные штуки. Но эт не совсем удобно, поэтому и возник вопрос.
можно сделать отдельную функцию которая будет принимать данные и отдавать html, через шаблонные строки, положить в отдельный файл
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 : '🇰🇿' });
Телеграм кое-где экранировал ``. + я не тестил
если все обернуть в тройные бектики будет все красиво
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 : '🇰🇿' });
Ну т.е. вывод такой, что пока встроенных возможностей в js нет для этих целей? Все равно приходится писать какие-то «надстройки»
Уже писал в первом посте. Если коротко: есть html (элемент template), который формирует сервер на php. Есть js код, чтобы асинхронно получать данные и вставлять в Dom , используя шаблон из элемента template. Поидеи задача стандартная. Но чтоб подставить данные какие то, нужно постоянно делать queryselector и т.п. другими словами, сделать по аналогии с php: ‘<div><? $value ?></dig>’, но нашивными средствами без надстроек. Но я так понял из гугла, такого способа нет. Но т.к. в js я нуб, есть вероятность, что не правильно делаю запрос в Гугл)))
Ну то есть я изначально получаю шаблон : querySelector(.item). А потом как «распариться» внутренний код?
вставляй так `${value}`
не, в данном подходе не надо использовать template штуки) вот как это делается https://github.com/f3d0t/public-apis-app/blob/b86adc6313c757a9bcc10c09200a9ba6ca4f2574/src/components/Header/Header.js
Куда вставлять, если нужно подставить эти данные в уже существующий DOM элемент?
Но тут ведь снова html внутри js кода.
Обсуждают сегодня