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

时间:2014-11-04 04:55:44

标签: javascript python django django-templates

据我所知,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 %}";

3 个答案:

答案 0 :(得分:1)

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

由于客户端/服务器端关系。

尝试在项目中使用include,这样会多次调用代码,但是项目中只有一个代码参考。

希望对你有所帮助。

答案 1 :(得分:0)

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

答案 2 :(得分:-1)

为了简化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 :好的,我想我明白了,我不明白你打算如何工作,所以这就是:

  1. 我猜你已经在你的settings.py这个元组中,如果没有添加它:

    LANGUAGES = (
        ('en', 'English'),
        ('de', 'German'),
        ('es', 'Spanish'),
        ...
        ...
    )
    
  2. 确保您的MIDDLEWARE_CLASSES包含'django.middleware.locale.LocaleMiddleware'

  3. 使用将RequestContext传递到模板上下文的函数渲染模板,例如django.shortcuts.render肯定会完成这项工作。

  4. 以下是我用来演示其工作原理的示例模板:

    {% 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>
    
  5. 这里发生的是,在服务器端,我们预填充一个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
    
相关问题