Question

有没有办法如何使用在＆lt; script＆gt; -tags中使用值绑定？ DotVVM ？＆＃xA;我想将ViewModel的属性显示为文本。在这里，我想使用 chartjs 设置图表的标签和数据。

＆＃xA; ＆＃xA;

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

＆＃xA;＆＃xA;

我正在尝试使用chartjs工作来获取图表。＆＃xA; ViewModel :(变量正在填充 PreRender（） Method）中的数据

＆＃xA;＆＃xA;

  private List＆lt; int＆gt; chartLabels = new List＆lt; int＆gt;（）;＆＃xA; private List＆lt; int＆gt; chartData1 = new List＆lt; int＆gt;（）;＆＃xA;＆＃xA; public string ChartLabels＆＃xA; {＆＃xA; get {return JsonConvert.SerializeObject（chartLabels）; }＆＃xA;}＆＃xA;＆＃xA;公共字符串ChartData1＆＃xA; {＆＃xA; get {return JsonConvert.SerializeObject（chartData1）; }＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

dothtml文件：

＆＃xA;＆＃xA;

 ＆lt; canvas id =“myChart”style =“padding：0; margin：auto; display：block;”＆gt; ＆LT; /画布＆GT;＆＃XA;＆＃XA;＆LT;脚本＆GT; ＆＃XA; var dataT = {＆＃xA;标签：{{value：ChartLabels}}，＆＃xA;数据集：[{＆＃xA;标签：“非洲”，＆＃xA;数据：{{value：ChartData1}}，＆＃xA; fill：false，＆＃xA; backgroundColor：“rgba（255,0,0,0.8）”，＆＃xA; borderColor：“rgba（255,0,0,0.8）”，＆＃xA; borderWidth：1＆＃xA; }]＆＃XA; };＆＃XA;＆＃XA; var ctx = $（“＃myChart”）。get（0）.getContext（“2d”）;＆＃xA; var myNewChart = new Chart（ctx，{＆＃xA; type：'line'，＆＃xA; data：dataT，＆＃xA; options：{＆＃xA; responsive：true，＆＃xA; title：{display ：true，text：'每个地区的世界人口数（以百万计）'}，＆＃xA;图例：{position：'bottom'}，＆＃xA; scale：{＆＃xA; xAxes：[{gridLines：{display ：false}，display：true，scaleLabel：{display：false，labelString：''}}]，＆＃xA; yAxes：[{gridLines：{display：false}，display：true，scaleLabel：{display：false， labelString：''}，ticks：{stepSize：250，beginAtZero：true}}]＆＃xA;}，＆＃xA;}＆＃xA;}）; ＆＃xA;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

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

＆＃XA;＆＃XA;

 <代码>＆LT;脚本＆GT;＆＃XA;＆＃XA; var dataT = {＆＃xA;标签：＆lt;！ -  ko text：ChartLabels  - ＆gt;＆lt;！ -  / ko  - ＆gt;，＆＃xA;数据集：[{＆＃xA;标签：“非洲”，＆＃xA; data：＆lt;！ -  ko text：ChartData1  - ＆gt;＆lt;！ -  / ko  - ＆gt;，＆＃xA; fill：false，＆＃xA; backgroundColor：“rgba（255,0,0,0.8）”，＆＃xA; borderColor：“rgba（255,0,0,0.8）”，＆＃xA; borderWidth：1＆＃xA; }]＆＃XA; };＆＃XA;＆＃XA; var ctx = $（“＃myChart”）。get（0）.getContext（“2d”）;＆＃xA; var myNewChart = new Chart（ctx，{＆＃xA; type：'line'，＆＃xA; data：dataT，＆＃xA; options：{＆＃xA; responsive：true，＆＃xA; title：{display ：true，text：'每个地区的世界人口数（以百万计）'}，＆＃xA;图例：{position：'bottom'}，＆＃xA; scale：{＆＃xA; xAxes：[{gridLines：{display ：false}，display：true，scaleLabel：{display：false，labelString：''}}]，＆＃xA; yAxes：[{gridLines：{display：false}，display：true，scaleLabel：{display：false， labelString：''}，ticks：{stepSize：250，beginAtZero：true}}]＆＃xA;}，＆＃xA;}＆＃xA;}）;＆＃xA;＆＃xA; ＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

在行＆lt;！ - ko text：ChartLabels - ＆gt;＆lt;！ - - / ko - ＆gt;，即将收到此错误

＆＃xA;＆＃xA;

＆＃xA;
未捕获的SyntaxError：意外的令牌：
＆＃xA;

＆＃xA;＆＃xA;

有人知道如何使用正确的值绑定（此处：将其显示为文本中的文本） <代码>＆LT;脚本＆GT; -tag）

＆＃XA？;

Answer 1

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

您有两种选择：

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

var vm = dotvvm.viewModels.root.viewModel;

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

客户端的viewmodel包含在Knockout observables中，因此请确保您不要忘记()来访问该值。

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

1 个答案: