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

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 click 事件中使用 $('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) );

不要忘记为 IE8 添加 es5-shim。

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

How to get component reference inside of the model save callback functions?

javascript

canjs

canjs-model