Django 模板 - 服务器端 django 标签的客户端操作答案

【问题标题】：Django Templates - client side manipulation of server side django tagDjango 模板 - 服务器端 django 标签的客户端操作
【发布时间】：2014-12-30 22:06:53
【问题描述】：

我了解 Django 在服务器端呈现模板。浏览器接收 HTML 内容，然后可以使用 JavaScript 对其进行操作。

我有一些 JavaScript 代码来操作 Django 语言标签，这些标签很难以当前的形式维护，所以我试图用一种更好的方法来编码它，但我想不出这样的方法，需要一些帮助。

这是我的代码：

dynamic_language_code 是两个字母的代码，即：en、fr、bg、ru、es 等。

function dateCalculation(dynamic_language_code) {

    var c = dynamic_language_code;

    //arabic
    if (dynamic_language_code == 'ar'){

        var_month = "{% language 'ar' %}{% trans 'month' %}{% endlanguage %}";
        var_months = "{% language 'ar' %}{% trans 'months' %}{% endlanguage %}";
        var_year = "{% language 'ar' %}{% trans 'year' %}{% endlanguage %}";
        var_years = "{% language 'ar' %}{% trans 'years' %}{% endlanguage %}";

    //bulgarian.  
    } else if (dynamic_language_code == 'bg'){

        var_month = "{% language 'bg' %}{% trans 'month' %}{% endlanguage %}";
        var_months = "{% language 'bg' %}{% trans 'months' %}{% endlanguage %}";
        var_year = "{% language 'bg' %}{% trans 'year' %}{% endlanguage %}";
        var_years = "{% language 'bg' %}{% trans 'years' %}{% endlanguage %}";

    } 
    ........
    many more else if conditions
    ........
    //default value of English.  
    } else {

        var_month = "{% language 'en' %}{% trans 'month' %}{% endlanguage %}";
        var_months = "{% language 'en' %}{% trans 'months' %}{% endlanguage %}";
        var_year = "{% language 'en' %}{% trans 'year' %}{% endlanguage %}";
        var_years = "{% language 'en' %}{% trans 'years' %}{% endlanguage %}";

    } 
}

代码应根据传入的 dynamic_language_code 值动态更改月份、年份的语言。确实不需要 if else 语句，只需使用传入的 dynamic_language_code 值分配 var_month、var_months、var_year 和 var_years 值。

我如何构造上面的代码以摆脱 if else 条件并仍然使用传入的 dynamic_language_code 返回正确的语言版本？

编辑

我想摆脱 if else 条件，只需使用动态语言标签将变量分配给语言代码。不知道我怎么能做到这一点，或者即使这可以做到。例如：

var_month = "{% language dynamic_language_code %}{% trans 'month' %}{% endlanguage %}";
var_months = "{% language dynamic_language_code %}{% trans 'months' %}{% endlanguage %}";
var_year = "{% language dynamic_language_code %}{% trans 'year' %}{% endlanguage %}";
var_years = "{% language dynamic_language_code %}{% trans 'years' %}{% endlanguage %}";

【问题讨论】：

有什么理由必须使用 JS 翻译单个文本吗？我认为一个好的设计是将实际的翻译工作留给模板系统，而 JS 或服务器视图只决定使用哪种语言。例如，用户切换语言后，您可以刷新页面并通过请求头将首选语言发送到服务器。服务器仅呈现首选语言的翻译文本。这个thread 谈到了 Django 端的切换语言。
ZZY，我正在使用 JavaScript 来避免页面刷新。我绝对不想刷新页面。 JS用于动态显示timspan，在数据发送到数据库之前。

标签： javascript python django django-templates

【解决方案1】：

简短的回答是你不能这样做。

因为客户端/服务器端的关系。

尝试在您的项目中使用包含，这样代码会被多次调用，但您的项目中只有一个代码引用。

希望对你有所帮助。

【讨论】：

其实不是这样的，按照我下面描述的说明，我能够实现他的目标，但我怀疑他是否会努力尝试。

【解决方案2】：

为了简化 javascript 代码，您可以进行简单的字符串替换，例如：

function dateCalculation(dynamic_language_code) {
    var lang = dynamic_language_code || 'en';  //handle default case
    var_month = "{% language '<<lang>>' %}{% trans 'month' %}{% endlanguage %}".replace("<<lang>>", lang);
    var_months = "{% language '<<lang>>' %}{% trans 'months' %}{% endlanguage %}".replace("<<lang>>", lang);
    var_year = "{% language '<<lang>>' %}{% trans 'year' %}{% endlanguage %}".replace("<<lang>>", lang);
    var_years = "{% language '<<lang>>' %}{% trans 'years' %}{% endlanguage %}".replace("<<lang>>", lang);
}

但一个更好的问题是，您希望它如何工作？ Javascript 在用户浏览器中执行，而 Django 模板引擎在服务器端处理这些标签。因此，当您的 HTML 到达您的浏览器时，您的所有模板语法都已替换为适当的内容，并且您使用 javascript 插入的任何附加标签都将被视为常规字符串。

编辑：更新代码以处理默认英文大小写。

EDIT2：好的，我想我明白了，我不明白你打算如何工作，所以这里是：

我猜你的 settings.py 中已经有这个元组，如果没有添加它：

LANGUAGES = (
    ('en', 'English'),
    ('de', 'German'),
    ('es', 'Spanish'),
    ...
    ...
)

确保您的MIDDLEWARE_CLASSES 包含'django.middleware.locale.LocaleMiddleware'
使用将RequestContext 传递到模板上下文的函数来渲染模板，例如django.shortcuts.render 肯定会完成这项工作。

这是我用来演示其工作原理的示例模板：

{% load i18n %}
<html>
    <head></head>
    <body>
        <script type="text/javascript">
        var languages = {% templatetag openbrace %}{% for lang in LANGUAGES %}
            "{{ lang.0 }}": {% templatetag openbrace %}
                "month": "{% language lang.0 %}{% trans 'month' %}{% endlanguage %}",
                "months": "{% language lang.0 %}{% trans 'months' %}{% endlanguage %}",
                "year": "{% language lang.0 %}{% trans 'year' %}{% endlanguage %}",
                "years": "{% language lang.0 %}{% trans 'years' %}{% endlanguage %}",
            {% templatetag closebrace %}{% if not forloop.last %},{% endif %}
        {% endfor %}{% templatetag closebrace %};

        function dateCalculation(dynamic_language_code) {
            var_month = languages[dynamic_language_code].month;
            var_months = languages[dynamic_language_code].months;
            var_year = languages[dynamic_language_code].year;
            var_years = languages[dynamic_language_code].years;
            console.log(var_month);
            console.log(var_months);
            console.log(var_year);
            console.log(var_years);
        }
        dateCalculation('en');
        </script>
    </body>
</html>

这里发生的情况是，在服务器端，我们预填充了一个 javascript 对象，其中可用的语言代码作为键，另一个对象作为它的值，其中包括 4 个子键：月、月、年和年。这些键中的每一个都将包含已经为它们翻译的单词，因此我们只需在对象内部进行查找，并获取输出。这是它的渲染 HTML 输出：

    <html>
        <head></head>
        <body>
            <script type="text/javascript">
            var languages = {
                "en": {
                    "month": "month",
                    "months": "months",
                    "year": "year",
                    "years": "years",
                },

                "de": {
                    "month": "Monat",
                    "months": "Monate",
                    "year": "Jahr",
                    "years": "Jahre",
                },

                "es": {
                    "month": "mes",
                    "months": "meses",
                    "year": "año",
                    "years": "años",
                }               
            };

            function dateCalculation(dynamic_language_code) {
                var_month = languages[dynamic_language_code].month;
                var_months = languages[dynamic_language_code].months;
                var_year = languages[dynamic_language_code].year;
                var_years = languages[dynamic_language_code].years;
                console.log(var_month);
                console.log(var_months);
                console.log(var_year);
                console.log(var_years);
            }
            dateCalculation('es');
            </script>
        </body>
    </html>

在我的 Javascript 控制台中，我得到了这个输出（因为我手动调用了 dateCalculation('es')）：

mes
meses
año
años

【讨论】：

我认为 user3354539 在 html 中嵌入了 js 代码。他的服务器呈现代码中所有语言的翻译。然后在客户端，js函数选择使用哪个文本
andrean，我无法让这个替换代码工作！我在问题中提供的示例 javascript 确实有效，并被触发以动态显示更改后的语言的日期时间跨度。但我需要让代码比现在更易于维护。
@user3354539：我测试了代码，因为它被粘贴在这里，当我console.log 变量时，我得到了正确的输出。检查您是否正确复制它，或者如果您另外修改了它，请确保您没有引入其他问题。
@user3354539 没有提供语言代码时的默认值可能是您测试的那个，我现在更新了代码以处理这种情况。
andrean，此代码不起作用。我已经测试了几种不同的方式。

【解决方案3】：

为避免页面刷新，您可以将翻译放在 JSON 文件中，例如 {"en":{"month":"xxx","months":"xxx"}, "ar":{}}。使用 AJAX 即时获取文件。或者将翻译放在专用的 JS 文件中。或者查看 Django 文档https://docs.djangoproject.com/en/dev/topics/i18n/translation/#internationalization-in-javascript-code。

【讨论】：

ZZY，这仍然会给我提供难以维护的代码。如果我将语言添加到我的项目中，我还必须添加到您建议的代码中。