Question

我开始使用jquery和Model View ViewModel，我遇到了使用事件处理程序附件：on（）的问题。我的第一堂课是TicTacToeModel，它在内存中操纵TicTacToe游戏：

var TicTacToeModel = function () {
        Observable.call(this);
        this.grid = new Array(3);
        for (let i = 0; i < this.grid.length; ++i) {
            this.grid[i] = new Array(3);
        }
    };
//Some prototype function
//...

我有另一个类，TicTacToeController，它依赖于第一个类，并通过操纵DOM来管理游戏的图形部分：

var TicTacToeController = function(game, selector) {
        this._element = $(selector);
        this._model = game;
        this._template = Handlebars.compile(view);
        this.addListeners();
        this.render();
    };

（游戏宣言：game = new TicTacToeModel();）

所以在我的第二节课中我有这个功能：

TicTacToeController.prototype.addListeners = function() {
    this._model.on('change', this.render, this);
    this._model.play(0,0);//works
    this._element.on('click', "td", function() {
        this._model.play(0,0);//doesn't work
    });
};

我想在单元格（0,0）中调用play（）函数（函数play在内存中更新游戏）当我单击图形界面中的单元格但我无法在其中执行此操作。上（）。但这似乎在.on（）函数之外工作，所以我认为导致问题的this利用率很低。

Answer 1

您需要像这样使用bind。

改变这个：

this._element.on('click', "td", function() {
    this._model.play(0,0);//doesn't work
});

为：

this._element.on('click', "td", function() {
    this._model.play(0,0); //should now work
}.bind(this));

Answer 2

你不在同一范围内，调用play方法时你使用的这个变量不一样。一个肮脏的解决方法可能是

let _model = this._model
this._element.on('click', "td", function() {
        _model.play(0,0);//work!
    });

但正如所说它是一个肮脏的解决方法，也许其他人可以解释，但基本上认为这会产生内存泄漏。也许解决方案是在同一个类中使用一个方法并将实例传递给click方法，类似于：

TicTacToeController.prototype.click = function() ...
...
this._element.on('click', "td", this.click);

认为这应该成功，但我必须承认我不是js专家。

访问方法

2 个答案: