knockout ChartJs
Использую вот такую библиотеку: http://www.chartjs.org/
HTML:
<script type="text/html" id="statisticsView">
<div class="row">
<div data-bind="myChart: true"></div>
</div>
</script>
JS:
ko.bindingHandlers.myChart = {
init: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
var canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 600;
element.appendChild(canvas);
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(pieData);
}
};
Проблема в том, что ChartJs работает со свойствами ctx.canvas.offsetWidth и ctx.canvas.offsetHeight, а они равны нулю, и вылетает ошибка, как можно это исправить?
<div data-bind="myChart: true">
<canvas id="chart-area" width="300" height="300"></canvas>
</div>
ko.bindingHandlers.myChart = {
update: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
var canvas = element.children["chart-area"];
console.log(canvas.offsetWidth);//0
}
};
Нашел один не хороший способ:
this.go = function () {
ko.applyBindingsToNode(document.getElementById('test'), {
myChart: true
});
}
ko.bindingHandlers.myChart = {
update: function (element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
//var canvas = element.children["chart-area"];
//console.log(canvas.offsetWidth);//0
var canvas = document.createElement('canvas');
var ctx2 = document.getElementById("chart-area").getContext("2d");
canvas.width = 600;
canvas.height = 600;
element.appendChild(canvas);
var ctx = canvas.getContext("2d");
console.log(ctx.canvas.offsetWidth);//600
}
};
По всей видимости, нужно отложить как то биндинг, но вот как сделать это красиво?
Источник: Stack Overflow на русском