What is the correct way to use text/template to create multiple backbone.js charts?

M

Max Yaremenko2016-11-19 02:52:00

JavaScript

Max Yaremenko, 2016-11-19 02:52:00

already brainwashed.
1. created template inside html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>backbone</title>
  <link rel="stylesheet" href="css/styles.css">

</head>
<body>

  <script type="text/template" id="template">
    <canvas id="myChart" width="400" height="400"></canvas>
  </script>
  <div class="container">
    <canvas id="myChart1"></canvas>
  </div>

  <script type="text/javascript" src="javascripts/lib/Chart.js"></script>
  <script type="text/javascript" src="javascripts/lib/jquery-3.1.1.js"></script>
  <script type="text/javascript" src="javascripts/lib/underscore.js"></script>
  <script type="text/javascript" src="javascripts/lib/backbone.js"></script>
  <script type="text/javascript" src="javascripts/chart.js" async></script>

</body>
</html>

2.created model diagram

var NewChart = Backbone.Model.extend({
  defaults: {
    type: 'bar',
      data: {
          labels: ["1", "2"],
          datasets: [{
              label: 'Default label',
              data: [1, 2],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)'
              ],
              borderWidth: 1
          }]
      },
    options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  }
});

3. created a view to render the chart:

var ChartView = Backbone.View.extend({
  tagName: "canvas",
  	className: "chart",
  template: _.template( $("#template").html() ),         // <----------------и возможно тут

  initialize: function () {
    this.render();
  },
  render: function () {
    var ctx = $(myChart)                                 // <----------------Проблема тут
    //var ctx = this.$el.html(this.template());         // <----------------Проблема тут
    //var ctx = $("script[type='text/template']").html(); // <----------------Проблема тут
    console.log($(myChart1));                             // <----------------Проблема тут
    this.$el.html( new Chart(ctx, this.model.toJSON()) );  // <----------------Проблема тут
    return this;
  }
});

var chart = new NewChart;
var chartView = new ChartView({model: chart});

$('.container').append(chartView1.render().el);

Problem! When I specify the context - just a canvas with an id, there are no problems, but if I create several diagrams, then they stupidly redraw each other ... and as a result, there is 1 diagram on the screen.
I need to fix the rendering so that I can set new chart models and they are rendered one after another... I've been sitting since lunch and it's almost 2 am (I couldn't find a solution, I hope the gurus will help.
Thank you colleagues.
PS: the task is to draw the charts in the container block , initially it should be empty ... that is, the konvas that was used inside to check thousands of different options (but not one helped (