Блог

Пытаюсь вызвать одну из моих функций компонентов ember, однако я получаю сообщение об ошибке: e-signature.js:28 Uncaught TypeError: this.testFunc is not a function

Однако я четко объявил функцию. Я вызываю, testFunc() когда пользователь нажимает на мышь (когда выдается ошибка). В чем проблема?

Component.js

импортируйте Ember из ’ember’;

 export default Ember.Component.extend({
    mousePressed: false,
    lastX: 0,
    lastY: 0,
    ctx: null,

    Draw(x, y, isDown) {
        if (isDown) {
            this.ctx.beginPath();
            this.ctx.strokeStyle = $('#selColor').val();
            this.ctx.lineWidth = $('#selWidth').val();
            this.ctx.lineJoin = "round";
            this.ctx.moveTo(this.lastX, this.lastY);
            this.ctx.lineTo(x, y);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        this.lastX = x; this.lastY = y;
    },

    InitThis() {
        this.ctx = document.getElementById('myCanvas').getContext("2d");
        console.log(this.ctx)

        $('#myCanvas').mousedown(function (e) {
            this.mousePressed = true;
            this.testFunc();
            this.Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
        });

        $('#myCanvas').mousemove(function (e) {
            if (this.mousePressed) {
                this.Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
            }
        });

        $('#myCanvas').mouseup(function (e) {
            this.mousePressed = false;
        });
            $('#myCanvas').mouseleave(function (e) {
            this.mousePressed = false;
        });
    },

    testFunc: function() {
        console.log('testFunc');
    },

    didRender() {
        console.log('eSignature didRender()');
        this.InitThis();
    },

    actions: {
        clearArea() {
        // Use the identity matrix while clearing the canvas
        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
        }
    }
});
  

this контекст неверен. Я бы посоветовал вам получить свойства компонента с помощью get функции

 var _this = this;
$('#myCanvas').mousedown(function (e) {
            _this.set('mousePressed',true);
            _this.testFunc();
            _this.Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
        });