Значение привязки в <script>-тег не работает - PullRequest
Новая
       56

Значение привязки в <script>-тег не работает

0 голосов
/ 08 июня 2018

Есть ли способ использовать привязку значений в тегах <script> с использованием DotVVM ?Я хочу отобразить свойства 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: Неожиданный токен:

Кто-нибудь знает, как использоватьправильное связывание значения (здесь: отображение его в виде текста в <script> -tag)?

1 Ответ

0 голосов
/ 08 июня 2018

Привязки значений не работают в элементах script - они переводятся в выражения JS Knockout (HTML-комментарии, содержащиеся в фрагменте кода).

У вас есть два варианта:

  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, поэтому убедитесь, что вы не забыли() для доступа к значению.

...