169 похожих чатов

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

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

14 ответов

16 просмотров

Можно с помощью шаблонных строк создавать) это самое простое

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

Про это собственно и веду речь) но туда добавлять данные приходится обычным способом через 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 : '🇰🇿' });

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

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

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 : '🇰🇿' });

Максим-Завалишин Автор вопроса
Rone
async processTemplate(template, data) { data =...

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

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

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

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

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

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

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

Максим-Завалишин Автор вопроса
Maksim
вставляй так `${value}`

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

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

Похожие вопросы

Обсуждают сегодня

Мужики и девушки, привет) в Вelphi xe7 в настройках во вкладке "Editor Options" далее " Color" есть список: "Elements", открыв который мы можем настраивать отображение разных...
Kraszx
14
Добрый вечер. Есть вопрос, а может и предложение. Был у меня диалог в другой группе о делфи и я задался вопросом: "А нельзя ли в делфи цвет //коментария и {комментария} сде...
Kraszx
24
Я вот подумал. SSE выполняет операции максимум с 64-битной точностью. А FPU - всегда с 80-битной. Разве не должно быть FPU точнее тогда?
The Bird of Hermes
13
как быть с принтером? такой подход прокатит?
zamtmn
12
Мдя, прикол, боевая сборка запускается (именно под отладчиком) после F9 примерно полторы минуты (97 секунд если быть точным). Начал копать - проблема детектится сразу - зависа...
Александр (Rouse_) Багель
38
Всем привет! Подскажи, пожалуйста, как передать в TComboBox сразу значение и id записи. На Delphi я делал так: ComboBox1.Items.AddObject('Какое-то значение', Pointer(id запис...
Евгений
13
Здравствуйте, вопрос по структурам данных. Были у вас случаи, когда пришлось писать деревья или двунаправленные списки?
/ /
50
Я не понимаю, это троллинг или что? Швабрика поддерживают, который буквально пишет на ассемблере взаимодействия с винапи. Я это ещё написал загрузчик и хоть что-то изучаю в о...
Shadow Akira
6
А вот это что за конструкция? Вернее, она тут нафига?
Serjone
10
Привет. Подскажите, как правильно сматчить лист фиксированного размера, чтобы компилятор не говорил мне о неполном паттерне? Допустим что-то такое [x', y'] = sort [x, y]?
Arseny
8
Карта сайта