Как правильно использовать text/template для создания нескольких диаграм backbone.js?

Question

Макс Яременко @quality_3011

full-stack web-developer

Как правильно использовать text/template для создания нескольких диаграм backbone.js?

уже сломал мозг.
1. создал шаблон внутри 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.создал модель диаграмму

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. создал вьюху для рендеринга диаграммы :

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);

Проблема! Когда указываю контекст - просто canvas с id проблем нет, но если создаю несколько диаграм то они тупо перерисовывают друг друга... и в итоге на экране 1 диаграмма.
Мне нужно исправить рендеринг чтоб можно было задавать новые модели диаграммы и они рендерились друг за другом... просидел с обеда и уже почти 2 часа ночи( решение найти не смог надеюсь гуру помогут.
Спасибо коллеги.

ПС: задача чтоб диаграммы отрисовывались в блоке контейнер, изначально он должен быть пустым... т.е конвас который внутри был использован для проверок тысяч различных вариантов( но так не один и не помог(