<script>-tag 中的值绑定不起作用

Question

有没有办法使用DotVVM 在<script>-tags 中使用值绑定？ 我想将 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>

在<!-- ko text: ChartLabels --><!-- /ko -->, 行我收到此错误

Uncaught SyntaxError: Unexpected token :

有人知道如何使用正确的值绑定（这里：在<script>-tag 中将其显示为文本）？

Answer 1

值绑定在 script 元素中不起作用 - 它们被转换为 Knockout JS 表达式（您在代码 sn-p 中拥有的 HTML cmets）。

你有两个选择：

1. 使用资源绑定：{{resource: ChartLabels}} 您需要进行所有转换，以便生成有效的 JavaScript 表达式 - 它只是在输出 HTML 中呈现一个字符串。

2. 您可以使用 JavaScript 直接从视图模型中获取值：

var vm = dotvvm.viewModels.root.viewModel;

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

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