Попытка использовать MooTools и Raphael - PullRequest
Новая
       25

Попытка использовать MooTools и Raphael

1 голос
/ 25 апреля 2011

У меня есть следующий фрагмент кода, который не работает, как я ожидал: 

var person = new Class({
    initialize: function(name)
    {
        this.personName = name;
        alert(this.personName)        //WORKS :-)

        this.testFunc();              //WORKS :-)
        this.createShape();           //PAINTS SHAPE BUT CANNOT ACCESS 'personName'
    },
    testFunc() : function()
    {
        alert(this.personName);
    }, 
    createShape() : function()
    {
        this.personShape = paper.rect(40,40,40,40).attr({"fill":"blue"});
        $(this.personShape.node).click(function()
        {

            alert(this.personName);
        });
    }
});

Предупреждение не работает для события click, и я понимаю его, потому что оно не может получить доступ к объектной переменной personName. Однако я хотел бы знать, возможно ли получить к нему доступ каким-либо образом?

Был бы хитрый маленький javascript трюк для достижения этой цели?

Спасибо за любые отзывы.

1 Ответ

1 голос
/ 25 апреля 2011

Внутри функции click в createShape контекст устанавливается на this.personShape.node.this больше не относится к вашему person, поэтому его необходимо кэшировать.Попробуйте это: 

createShape: function() {
    var context = this;
    context.personShape = paper.rect(40,40,40,40).attr({"fill":"blue"});
    $(context.personShape.node).click(function() {
        alert(context.personName);
    });
}

Кроме того, ваши функции не должны иметь скобок в вашем определении класса / объекта.Кроме того, по нескольким причинам рекомендуется начать ставить фигурные скобки в одну строку с выражением.Вот мой рефакторинг: 

var person = new Class({
    initialize: function(name) {
        this.personName = name;
        alert(this.personName)        //WORKS :-)

        this.testFunc();              //WORKS :-)
        this.createShape();
    },
    testFunc: function() {
        alert(this.personName);
    }, 
    createShape: function() {
        var context = this;
        context.personShape = paper.rect(40,40,40,40).attr({"fill":"blue"});
        $(context.personShape.node).click(function() {
            alert(context.personName);
        });
    }
});
...