Question

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环是for循环之间的每一件事都要重复..但我不想那样....下面我已经粘贴了我的代码..任何人都告诉我更好的做法这....因为这看起来很丑..

这是我的代码：

    {% block extra_javascript %}
    <script src="/static/js/Chart.min.js"></script> 
    <script>    
    $(document).ready(function(){
        var data = {
    labels : ["January","February","March","April","May","June","July","August","September","October","November","December"],
    datasets : [
        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",

                      data : [{{ stats_dict.0.Jan }},{{ stats_dict.1.Feb }},{{ stats_dict.2.March }},{{ stats_dict.3.April }}
                      ,{{ stats_dict.4.May }},{{ stats_dict.5.June }},{{ stats_dict.6.July }},{{ stats_dict.7.August }},{{ stats_dict.8.Sept }},
                      {{ stats_dict.9.Oct }},{{ stats_dict.10.Nov }},{{ stats_dict.11.Dec }}]                     


        }
    ]
};
    //Get context with jQuery - using jQuery's .get() method.
    var ctx = $("#myChart").get(0).getContext("2d");
    //This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx).Bar(data,{});
    });
  </script>
  {% endblock %}

背景：

[[{'stats_dict': [{'Jan': 0}, {'Feb': 0}, {'March': 0}, {'April': 0}, {'May': 0}, {'June': 0}, {'July': 0}, {'August': 0}, {'Sept': 3}, {'Oct': 0}, {'Nov': 0}, {'Dec': 0}]}], {'csrf_token': <django.utils.functional.__proxy__ object at 0xa4d874c>}, {'perms': <django.contrib.auth.context_processors.PermWrapper object at 0xa4d878c>, 'user': <django.utils.functional.SimpleLazyObject object at 0xa47abcc>}, {}, {'LANGUAGES': (('ar', 'Arabic'), ('az', 'Azerbaijani'), ('bg', 'Bulgarian'), ('bn', 'Bengali'), ('bs', 'Bosnian'), ('ca', 'Catalan'), ('cs', 'Czech'), ('cy', 'Welsh'), ('da', 'Danish'), ('de', 'German'), ('el', 'Greek'), ('en', 'English'), ('en-gb', 'British English'), ('eo', 'Esperanto'), ('es', 'Spanish'), ('es-ar', 'Argentinian Spanish'), ('es-mx', 'Mexican Spanish'), ('es-ni', 'Nicaraguan Spanish'), ('et', 'Estonian'), ('eu', 'Basque'), ('fa', 'Persian'), ('fi', 'Finnish'), ('fr', 'French'), ('fy-nl', 'Frisian'), ('ga', 'Irish'), ('gl', 'Galician'), ('he', 'Hebrew'), ('hi', 'Hindi'), ('hr', 'Croatian'), ('hu', 'Hungarian'), ('id', 'Indonesian'), ('is', 'Icelandic'), ('it', 'Italian'), ('ja', 'Japanese'), ('ka', 'Georgian'), ('kk', 'Kazakh'), ('km', 'Khmer'), ('kn', 'Kannada'), ('ko', 'Korean'), ('lt', 'Lithuanian'), ('lv', 'Latvian'), ('mk', 'Macedonian'), ('ml', 'Malayalam'), ('mn', 'Mongolian'), ('nb', 'Norwegian Bokmal'), ('ne', 'Nepali'), ('nl', 'Dutch'), ('nn', 'Norwegian Nynorsk'), ('pa', 'Punjabi'), ('pl', 'Polish'), ('pt', 'Portuguese'), ('pt-br', 'Brazilian Portuguese'), ('ro', 'Romanian'), ('ru', 'Russian'), ('sk', 'Slovak'), ('sl', 'Slovenian'), ('sq', 'Albanian'), ('sr', 'Serbian'), ('sr-latn', 'Serbian Latin'), ('sv', 'Swedish'), ('sw', 'Swahili'), ('ta', 'Tamil'), ('te', 'Telugu'), ('th', 'Thai'), ('tr', 'Turkish'), ('tt', 'Tatar'), ('uk', 'Ukrainian'), ('ur', 'Urdu'), ('vi', 'Vietnamese'), ('zh-cn', 'Simplified Chinese'), ('zh-tw', 'Traditional Chinese')), 'LANGUAGE_BIDI': False, 'LANGUAGE_CODE': 'en-us'}, {'MEDIA_URL': ''}, {'STATIC_URL': '/static/'}, {'TIME_ZONE': 'America/Chicago'}, {'messages': <django.contrib.messages.storage.fallback.FallbackStorage object at 0xa47ac6c>}]

Answer 1

第1步 - 从不 EVER 混合使用JavaScript和Django模板语言。这是灾难的设置。

第2步 - 重构

重构第一步：

创建一个新视图，输出JSON的日期字典。（我不是在编写你的应用程序，但我会给你如何改进的指示）

def date_view(request):
    stats = Stats.objects.all().order_by('month')
    #do some other stuff that you already have done.
    return {'january':stats.january, and so forth...}

步骤b） - 将您当前的代码重构为以下内容：

var dataForChart =  {
  labels: [months],
  datasets: [{
    fillColor: ...,
    strokeColor: ...,
    data: null,
  }]
}

$.get('/myStatsViewUrl', function(data) {
  dataForChart["data"] = data;
});

步骤c）很高兴你现在已经将Djangos模板从你的javascript中解耦了，并且很多欢乐已经完成了，因为你现在可以在你的代码中的任何地方重用它了！

如何在没有for循环的情况下在Javascript中使用Django模板标签

1 个答案: