<script> 标签中的值绑定不起作用

Question

有没有办法使用 DotVVM 在 <script> 标签中使用值绑定？我想将 ViewModel 的属性显示为文本。在这里我想使用 chartjs.

设置图表的标签和数据

这就是我到目前为止所得到的：

我正在尝试使用 chartjs 制作图表。 ViewModel：（变量正在 PreRender() 方法中填充数据）

private List<int> chartLabels = new List<int>();
private List<int> chartData1 = new List<int>();

public string ChartLabels
{
    get { return JsonConvert.SerializeObject(chartLabels); }
}

public string ChartData1
{
    get { return JsonConvert.SerializeObject(chartData1); }
}

dothtml 文件：

<canvas id="myChart" style="padding: 0;margin: auto;display: block; "> </canvas>

<script>   
    var dataT = {
        labels: {{value: ChartLabels}},
            datasets: [{
                label: "Africa",
                data: {{value: ChartData1}},
                fill: false,
                backgroundColor: "rgba(255, 0, 0, 0.8)",
                borderColor: "rgba(255, 0, 0, 0.8)",
                borderWidth: 1
            }]
        };

        var ctx = $("#myChart").get(0).getContext("2d");
        var myNewChart = new Chart(ctx, {
            type: 'line',
            data: dataT,
            options: {
                responsive: true,
                title: { display: true, text: 'World population per region (in millions)' },
                legend: { position: 'bottom' },
                scales: {
                    xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                    yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 250, beginAtZero: true } }]
                },
            }
        });  
</script>

将所有内容放在一起，这就是我打开页面时得到的结果：

<script>

    var dataT = {
        labels: <!-- ko text: ChartLabels --><!-- /ko -->,
            datasets: [{
                label: "Africa",
                data: <!-- ko text: ChartData1 --><!-- /ko -->,
                fill: false,
                backgroundColor: "rgba(255, 0, 0, 0.8)",
                borderColor: "rgba(255, 0, 0, 0.8)",
                borderWidth: 1
            }]
        };

        var ctx = $("#myChart").get(0).getContext("2d");
        var myNewChart = new Chart(ctx, {
            type: 'line',
            data: dataT,
            options: {
                responsive: true,
                title: { display: true, text: 'World population per region (in millions)' },
                legend: { position: 'bottom' },
                scales: {
                    xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                    yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 250, beginAtZero: true } }]
                },
            }
        });

    </script>

在第 , 行我收到了这个错误

Uncaught SyntaxError: Unexpected token :

有人知道如何使用正确的值绑定（此处：在 <script> 标签中将其显示为文本）吗？

Answer 1

值绑定在 script 元素中不起作用 - 它们被转换为 Knockout JS 表达式（代码片段中的 HTML 注释）。

您有两个选择：

使用资源绑定：{{resource: ChartLabels}} 您需要进行所有转换，以便生成有效的 JavaScript 表达式 - 它只是在输出 HTML.
您可以使用 JavaScript 直接从视图模型获取值：

var vm = dotvvm.viewModels.root.viewModel;

// you need to use () to read the value of Knockout observables 
var chartLabels = vm.ChartLabels();

客户端的视图模型包装在 Knockout observables 中，因此请确保您不要忘记() 访问该值。

<script> 标签中的值绑定不起作用

Value binding in <script>-tag not working

html

javascript

asp.net

data-binding

dotvvm