将 Django 变量发送到 javascript

Question

我正在尝试在 javascript 脚本中访问 Django 占位符，它是数据库中的一个数组，以便在 three.js 中使用

我在views.py中有coord_x、coord_y和coord_z变量，这些变量来自数据库：

cur.execute("""SELECT x FROM pc_processing.basesample""")
coord_x = cur.fetchall()
cur.execute("""SELECT y FROM pc_processing.basesample""")
coord_y = cur.fetchall()
cur.execute("""SELECT z FROM pc_processing.basesample """)
coord_z = cur.fetchall()

在我的模板 html 中（随机测试编号被注释掉，有利于测试）：

...
for (var i = 0 ; i < numpoints ; i++) {

    var x = {{coord_x}};
    var y = {{coord_x}};
    var z = {{coord_x}};

    // var x = Math.random() * (0 - 1) + 1
    // var z = Math.random() * (0 - 1) + 1
    // var y = Math.random() * (0 - 1) + 1

    var dotGeometry = new THREE.Geometry();
    dots.push(dotGeometry);
    dotGeometry.vertices.push(new THREE.Vector3(x, y, z));
    var dotMaterial = new THREE.PointsMaterial( { size: 3, sizeAttenuation: false, color: 0xFF0000 });
    var dot = new THREE.Points( dotGeometry, dotMaterial);
    scene.add(dot);
}
...

我猜我需要以某种方式遍历 x、y、z 变量？

Answer 1

你可以这样试试：

在views.py 中通过这样的上下文发送变量：

context = { 'coord_x': 20, 'coord_y': 10, 'coord_z': 30}
return render(request, 'template.html', context)

并在模板中将变量附加到window 对象：

<script>
window.x = "{{coord_x}}"
window.y = "{{coord_x}}"
window.z = "{{coord_x}}"
</script>

并在您的 JS 文件中使用它。如果变量是列表，那么您必须遍历它们：

var currX = x[i];
var currY = y[i];
var currZ = z[i];

dotGeometry.vertices.push(new THREE.Vector3(currX, currY, currZ));

更好的方法是发送这些变量不是列表，而是字典。像这样在views.py:

context = { 'coordinates': [{'x':1, 'y':2, 'z':3}, {'x':1, 'y':2, 'z':4}] }
return render(request, 'template.html', context)

将它们附加到 JS 中：

<script>
window.coordinates = "{{ coordinates }}";
</script>

并像这样使用它：

coordinates.forEach(function(i){
...
dotGeometry.vertices.push(new THREE.Vector3(i.x, i.y, i.z));
...
}