Question

解决!!看到我用过的结果的问题的结尾

我正在尝试编写一个可以通过路由处理我的应用程序分页的函数。

我有一个函数route（）被调用，参数是要移动到的路径（页面）。

route是一个对象，它定义了一个处理其逻辑的模型。该模型包含3个功能的indexAction - 这会呈现我的视图并将其附加到我的页面。 bindEvents - 这是我放置所有点击事件的地方关掉 - 这是移动到新页面时运行的说明

路由器功能首先在当前页面上运行shutdown，这里我有$（selector）.off（）和$（selector）.remove（）

然后运行enidexAction和bindEvents函数。

现在我的问题是，当我返回此页面时，我的所有点击功能都运行了两次，然后是三次等......就好像off（）从未真正从锚点解除绑定。

这是我的一个模型的例子

var NewPageModel = (function() {
var instance;
var modal = 'null';
function createInstance() {
    var object = {
        indexAction: indexAction,
        shutDown: shutDown,
        bindEvents: bindEvents
    };
    return object;
}

function indexAction (data, callback){
    var partials = {};
    ViewManager.render('pageName',{context:data}, partials,function(html){
        ViewManager.appendUnique('#xxx',html,'uniqueID');
        callback();
    });
}

/**
 * Remove modal
 */
function shutDown(){
    this.modal.off();
    this.modal.remove();
}

function bindEvents() {
    if(this.modal!='null'){
        return;
    }
    this.modal = $(PagerManager.pages.newGroup.id);

    this.modal.on('click','div.close', function () {
        shutDown();
    });

    this.modal.on('click', 'button.cancel', function () {
       shutDown();
    });

    this.modal.on('click', 'button.submit', function () {
       //code that submits form information
    });
}

return {
    getInstance: function () {
        if (!this.instance) {
            this.instance = createInstance();
        }
        return this.instance;
    }
};
})();

EDIT !! 所以我仍然在了解范围的重要性以及它们如何应用于功能这是工作代码 var NewPageModel =（function（）{ var实例; var modal; function createInstance（）{ var object = { indexAction：indexAction， shutDown：shutDown， bindEvents：bindEvents }; 返回对象; }

function indexAction (data, callback){
    var partials = {};
    ViewManager.render('pageName',{context:data}, partials,function(html){
        ViewManager.appendUnique('#xxx',html,'uniqueID');
        callback();
    });
}

/**
 * Remove modal
 */
function shutDown(){
    this.modal.off();
    this.modal.remove();
    this.modal = null;
}

function bindEvents() {
    //This is confused logic, if I use off() in shutdown, I don't need to do this as I need to bind all the events again. hence in shutdown modal=null;
    if(!this.modal){
        return;
    }
    this.modal = $('#modal');

    this.modal.on('click','div.close', function () {
        shutDown().apply(this);
    }).bind(this);;

    this.modal.on('click', 'button.cancel', function () {
       shutDown().apply(this);
    }).bind(this);;

    this.modal.on('click', 'button.submit', function () {
       //here I only use the apply(this) if I use another internal function 
       //code that submits form information
    }).bind(this);;
}

return {
    getInstance: function () {
        if (!this.instance) {
            this.instance = createInstance();
        }
        return this.instance;
    }
};
})();

Answer 1

您在事件处理函数中丢失了this（this将是单击的元素），因此shutDown未获得正确的this：

this.modal.on('click','div.close', function () {
    shutDown();
});

应该是：

var self = this;
this.modal.on('click', 'button.cancel', function () {
   self.shutDown();
});

e.g。

function bindEvents() {
    var self = this;
    if(this.modal!='null'){           /// <<<< !!!!!! WTF
        return;
    }
    this.modal = $(PagerManager.pages.newGroup.id);

    this.modal.on('click','div.close', function () {
        self.shutDown();
    });

    this.modal.on('click', 'button.cancel', function () {
       self.shutDown();
    });

    this.modal.on('click', 'button.submit', function () {
       //code that submits form information
    });
}

注意：我现在忽略了与null的字符串比较，因为我不知道你在那里做了什么：）

正如@Gurami Dagundaridze在评论中指出的那样，你也可以使用this保留正确的bind（我认为语法是这样的）：

    this.modal.on('click', 'button.cancel', shutDown.bind(this));

Answer 2

本着保持语法和修复错误的精神，

if(this.modal!='null'){应为if(modal!='null'){

因为this.modal在这种情况下会undefined，而且会返回。

本着修复代码的精神，您需要保留对this的引用，或者在浏览器中默认为window。

var modal;
function createInstance() {
    var object = {
        modal : modal,
        shutDown: shutDown,
        bindEvents: bindEvents
    };
    return object;
}

function bindEvents() {
    if(this.modal){
        return;
    }

   // ..... //
    this.modal.on('click','div.close', function () {
        shutDown.apply(this);
    }.bind(this));

   // ..... //
}

工作演示：

http://jsfiddle.net/uyovgdj3/

jQuery没有像我预期的那样工作

2 个答案: