如何使用 ejs 寫入變量？

Question

我正在使用 ejs 模板引擎。 一個數組存儲在 system.os 中。 需要將其寫入 osdata 變量，以便以后可以用於在 chart.js 上構建 digram。

HTML：

<%= let osdata = user.name %> // doesn't work
<canvas id="deviceChart" width="400" height="300"></canvas>

JS：

var ctx = document.getElementById('deviceChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: ' всего ',
            data: osdata, //osdata
            backgroundColor: [
                'rgba(255, 99, 132)',
                'rgba(54, 162, 235)',
                'rgba(255, 206, 86)',
                'rgba(75, 192, 192)',
            ],  
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Answer 1

這可以通過添加一個 div 元素然后在腳本中調用它來完成，如下所示：

HTML：

<div id="osData" data-os= <%= user.name %> ></div>
<canvas id="deviceChart" width="400" height="300"></canvas>

JS：

<script>
let osData = document.getElementById('osData').dataset.os;
console.log(osData) //check your data here
</script>

在這里，您以element.dataset.keyname的形式訪問值，而鍵名是包含前綴data-的os

Answer 2

如果您需要創建一個變量，以便在瀏覽器中運行客戶端的javascript 可以訪問，您應該使用 EJS 在<script>標記中聲明它：

<script>let osdata = <%= user.name %>;</script>
<canvas id="deviceChart" width="400" height="300"></canvas>