javascript - Ember 组件功能

Question

尝试调用我的 ember 组件函数之一，但出现错误: e-signature.js:28 Uncaught TypeError: this.testFunc 不是函数

但是我已经明确声明了该函数。当用户按下鼠标时(即抛出错误时)，我正在调用 testFunc() 。这是什么问题？

组件.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);
        }
    }
});

Answer 1

这个上下文是错误的。我建议您使用 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);
        });