如何：django模板傳遞數組並在JavaScript中使用它？

好了，所以這裏有一個問題，我有一個HTML模板，看起來是這樣的：如何：django模板傳遞數組並在JavaScript中使用它？

<script> 
    $(function() { 
     var vCountries = {{ visitedCountriesList }}; 
    }); 
</script> 

<..> 

{{ visitedCountriesList }}

從服務器我傳遞一個列表此文件，但在渲染之後，它看起來是這樣的：

<script> 
    $(function() { 
      var vCountries = ; 
     }); 
    </script> 

    <..> 

    [u'Afghanistan', u'Japan', u'United Arab Emirates']

所以我的問題是 - 爲什麼？以及如何將它傳遞給JavaScript ...？

，你應該在你的HTML中呈現的變量的ID，並期待它在那裏，讓我們開始做一個例子：

<...> 
    <loldiv id="myvar" data="{{info}}"/> 
<...>

，並在你的JavaScript：

<script> 
$(function() { 
    var vCountries = $("#myvar").attr("data"); 
}); 
</script>

這是假設你是使用jQuery。

我真的不知道爲什麼模板分配的變量，但你不應該呈現任何關於JavaScript代碼的信息，因爲有一個時刻，你要把那個JS放在一個壓縮文件，或移動它，或者重用它，如果以這種方式呈現變量值，將很難做到這一點。

希望這有助於！

2011-07-24 11:16:18 Hassek

好的，你如何將data =「[u'Afghanistan'，u'Japan'，u'United Arab Emirates']」轉換爲js中的數組對象？ –

您應該將列表編碼爲json並將其解碼爲您的javascript。從django.utils導入simplejson vcountries = simplejson.dumps（vcountries）和發送，從您的視圖和解碼變量和JSON.parse在你的JavaScript – Hassek

有沒有必要做這個 - JSON編碼之後，可以簡單地作爲一個字符串插入到Javascript中。 –

的問題是該陣列的字符串表示不是有效的JavaScript。開始時u'不好。這：

[u'Afghanistan', u'Japan', u'United Arab Emirates']

應該是這樣的：

['Afghanistan', 'Japan', 'United Arab Emirates']

你有兩個選擇。在視圖函數中，將其編碼爲JSON：

render_to_response('my_view.html', { 
    'visitedCountriesList' : json.dumps(visitedCountriesList) 
})

或創建一個您可以使用的過濾器。一個例子見this。然後用法是：

<script> 
    $(function() { 
    var vCountries = {{ visitedCountriesList|jsonify }}; 
    }); 
</script>

2011-07-24 13:06:19 Bialecki

回答