javascript - 如何在模型保存回调函数中获取组件引用？

Question

我有一个带有模型的登录组件，该模型进入服务器并在登录不正确时收到错误。

这是我所说的想法：

var LoginModel = can.Model.extend({
    create : "POST /account/login"
},{});

can.Component.extend({
    tag: "pod-login",
    template: can.view("/static/js/views/login_form.stache"),
    viewModel:{
        login: new LoginModel(),
        processLogin: function(login) {
            // I need to access the component here
        },
        processLoginError: function(response) {
            // I need to access the component here
        }
    },
    events: {
        "#login_button click": function() {
            var form = this.element.find( 'form' );
            var values = can.deparam(form.serialize());
            this.viewModel.login.attr(values).save(
                this.viewModel.processLogin,
                this.viewModel.processLoginError
            );
        }
    }


});

这里的问题是，当我尝试在模型登录处理程序中使用“this”时，我得到的对象不是当前组件实例。例如，在 proessLoginError 上，我得到了 xhr 参考。

如何访问 processLogin 和 processLoginError 内部的组件？

我的解决方法是在 login_button 点击​​事件中使用 $('some_html_element_on_my_template').data('component', this) 并在回调函数中访问它，但我认为这可以更好地处理。

有没有见识的大佬

Answer 1

您需要将上下文绑定到回调： this.viewModel.login.attr(values).save( this.viewModel.processLogin.bind(this), this.viewModel.processLoginError.bind(this) );

并且不要忘记包括es5-shimIE8。