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) );

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

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

1 个答案: