django將數據傳遞給javascript的最佳方式

我曾經將數據「綁定」到DOM，直到我發現數據綁定庫。我的問題，說我有一個表，其中包含模型記錄，我怎樣才能建立與JS的表，即將對象傳入JavaScript，而不是直接在模板中建立表？django將數據傳遞給javascript的最佳方式

從搜索，我發現的唯一途徑到目前爲止是這樣的事情：

var data = '{{data}}';

{{data}}可能是這個例子JSON。

這似乎對我來說是醜陋和不好，把模板代碼放在JavaScript中，而且我也不喜歡JavaScript中全局變量的想法（舊的方式，它不能很好地縮放）。它也不會允許我把它放到外部的JS文件中。有更好的（和乾淨的）方法嗎？

來源

2016-07-29 user3599803

{{data}} - 它是json數據嗎？ http://stackoverflow.com/questions/38620816/django-passing-json-data-to-static-getjson-javascript/38621448 – Igor

可能重複的[Django模板變量和Javascript]（http://stackoverflow.com/questions/298772/django-template-variables-and-javascript） – Cory

這就是我也是這樣做的，但我不會傳遞太多的數據，只有少數參數需要初始化JS代碼。主要數據通過API傳遞。

你可以傳遞一個JSON，如果你想，但你可以在模板渲染之前使用escapejs

var data = '{{data|escapejs}}';

希望這有助於

來源

2016-07-29 09:17:35 pleasedontbelong

有整齊地分離株預裝串行方式至少清潔data來自其他代碼的數據。

實施例1 -assigning預加載數據到全局變量上window，在你隨後的表組件使用它：

<html> 
<meta charset="utf-8"> 
<body> 
    <script> 
     // Loading the data for use in JS components here 
     (function() { 
      window.tableData = JSON.parse('{{ table_data }}'); 
     }()); 
    </script> 

    <script src="table.js"></script> 
    <!-- table.js uses window.tableData when building the table --> 
</body>

實施例2 -encapsulate表組件作爲模塊，從初始化它主模板並傳遞預加載的數據。

<html> 
<meta charset="utf-8"> 
<body> 
    <table id="theTable"></table> 

    <script src="table.js"></script> 
    <!-- table.js exports itself globally as window.table --> 

    <script> 
     // Loading the data and initializing table component 
     (function() { 
      var tableEl = $('#theTable'); 
      var tableData = JSON.parse('{{ table_data }}'); 

      window.table.init(tableData, tableEl); 
     }()); 
    </script> 
</body>

依此類推！

想要完全避免混用Django模板語言和JavaScript？

通過XHR傳遞所有數據 - 在加載頁面後向服務器發出AJAX請求;編寫一個Django視圖，將您需要的數據返回爲JSON，這很容易在JavaScript中解析。

想要的一切，保持Django的模板語言了和避免額外的XHR時獲取數據？

研究如何在React.js或AngularJS等框架上構建應用程序，並利用組件的服務器端渲染。

來源

2016-07-29 09:28:50 Tony

其實我正在研究你建議的最後一種方法。服務器端組件的渲染 - 它是什麼，它如何與Django一起工作？任何參考都會很棒。 – user3599803

@ user3599803當然，上次我偶然發現https://github.com/markfinger/python-react時，README對於Django特定的集成有相當多的瞭解。目前還沒有使用它，只是在研究。 – Tony

django模板autoescape所有標記{{}}。

如果table_data已經在模板標籤中使用了json數據。簡單。

<script> 
var myTable = {% autoescape off %}{{ table_data }}{% endautoescape %}; 
</script>

不需要托架和報價，它的陣列在JavaScript（如VAR示例= [ '測試'];）

如果數據未JSON，在請求（渲染模板）返回。示例

import json 
from django.shortcuts import render 

def home(request): 
    table_data = MyModel.objects.select_related().values('items1', 'items2') 
    return render(
     request, 
     'main.html', 
     { 
      'table_data': json.dumps(list(table_data)) 
     })

來源

2016-07-29 10:49:36 Igor

django將數據傳遞給javascript的最佳方式

回答

相關問題