Использование значения переменной Javascript в шаблоне django для визуализации контекста шаблона

Question

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

У меня есть шаблон django. Я передаю ему следующий контекст:

context = {
'1_title': 'Title 1',
'2_title': 'Title 2',
'3_title': 'Title 3',
'4_title': 'Title 4',
}
return render(request, 'index.html', context)

У меня есть файл HTML, в котором есть раскрывающийся список. У выпадающего списка есть такие значения, как 1,2,3,4. Я зарегистрировал для него функцию onClick.

Мне нужно добиться этой функции. Я получу значение в функции onClick. Затем я объединю полученное значение с _title и сохраню в нем переменную javascript. Теперь мне нужно использовать эту переменную javascript для ссылки на контекст django. Я не могу этого достичь. Я гуглил и сделал обширный поиск в stackoverflow. Похоже, никто не отвечает на мой вопрос.

Функция javascript выглядит следующим образом:

function getContextValue(value) {
var key = value + '_title'; 
return {{ key }}
}

Если я выберу 1 в раскрывающемся списке, то вышеупомянутая функция будет иметь клавишу в качестве 1_титла. Мне нужно вернуть значение 1_title из контекста, который является заголовком 1.

Для меня это не работает и возвращает только 1_title. Я даже попытался вернуть {{'key'}}. В этом он возвращает ключ.

Сообщество Stackoverflow, будьте добры. Это может быть простой вопрос для вас, но не для меня.

Answer 1

Если вы хотите получить доступ к контекстной информации в JS, вам нужно каким-то образом доставить ее до JS.

Измените свой контекст на что-то подобное, чтобы упростить доступ к шаблону.

context = {}
context['data_for_select'] = {
'1_title': 'Title 1',
'2_title': 'Title 2',
'3_title': 'Title 3',
'4_title': 'Title 4',
}
return render(request, 'index.html', context)

Я предполагаю, что у вас есть что-то подобное в шаблоне:

<select name="dropdown">
  {% for key, title in data_for_select.items %}
    <option value="{{key}}">{{title}}</option>
  {% endfor %}
</select>

Теперь вы можете визуализировать данные контекста где-нибудь в DOM для вашего JS метода. Django предоставляет удобный шаблонный фильтр с именем json_script https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#json -скрипт

{{ data_for_select|json_script:"select-data" }}

Вы можете использовать его в JS, например:

var data = JSON.parse(document.getElementById('select-data').textContent);

Таким образом вы предоставили данные контекста шаблона для JS.