javascript - 使用django模板中Javascript变量的值来渲染模板上下文

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_title。我需要从上下文中返回 1_title 值，即标题 1。

对我来说它不起作用并且仅返回 1_title 。我什至尝试过 return {{ '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-script

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

你可以在 JS 中使用它，例如:

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

这样您就可以将模板上下文数据公开给 JS。