Question

我有一个Aurelia应用程序，我将在其中显示一些图表。我对.Net中的MVVM模式非常熟悉，但不熟悉javascript。

我在我的应用中安装了Chart.js。在我的viewModel中，我已导入它（import { Chart } from 'chart.js';）。

在我看来，我准备了一个Canva：

<canvas id="myChart" width="400" height="400"></canvas>

现在，我该如何生成此图表？因为对我而言，这是我创建的视图问题，所以我应该创建一个<script>标记并将创建代码放入其中吗？如何与来自视图模型的数据绑定？

我是否需要在视图中执行一些<require from="..:"></require>？

或者我应该从ViewModel实例化图表？（在这种情况下，我应该何时创建它，因为在构造函数中，dom元素已经存在，并且在我看来这打破了松散耦合的方法。）

谢谢！

修改

目前我在@valichek之后回答：

ViewModel：

import { Aurelia, inject } from 'aurelia-framework';
import { Router, RouterConfiguration } from 'aurelia-router';
import { Chart } from 'chart.js';
import { log } from "../services/log";

export class ClanChest {
    viewCanva: HTMLCanvasElement;
    constructor() {
    }

    public attached() {
        log.info('Starting to attach');
        var myChart = new Chart(this.viewCanva, {
            type: 'bar',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        log.info('Finished');
    }

}

查看：

<template>
    <h1>ClanChest</h1>
    <canvas ref="viewCanva" width="400" height="400"></canvas>
</template>

代码被执行，我没有错误，但到目前为止我没有显示任何内容，canva已被调整为0x0，就是这样。

Answer 1

VM中有两个位置：bind（组件的数据可用）和attached（准备进行DOM更改）

您可以在此处阅读有关组件生命周期的更多信息http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/creating-components/3

在访问ref

时，还有<canvas />属性可能很有用

http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics/5

更新：我创建了自己的工作示例：

组件/ chartjs / chart.js之

import {containerless} from 'aurelia-framework';
import ChartJs from 'chart.js'

@containerless()
export class Chart {

  container;

  constructor() {

  }

  attached() {


  this.myChart = new ChartJs(this.container, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });


  }

}

组件/ chartjs / chart.html：

<template>
  <canvas ref="container" width="400" height="400"></canvas>
</template>

页面上的某个地方：

<require from="components/chartjs/chart"></require>
<chart></chart>

注意：这只是示例，也许您需要一些优化，例如检查并避免在重新连接组件时存在内存泄漏

使用MVVM模式在SPA（Aurelia）中创建图表

1 个答案: